I am using bootstrap to style my button in HTML file by:
<button type="button" class="btn btn-primary">Start</button>
And I want to access the class in js file by
var buttonStart = document.getElementsByClassName('btn btn-primary');
And I got the error in the console. Is there any problem with my code?
VM131:1 Uncaught ReferenceError: buttonStart is not defined at <anonymous>:1:1
<p><span id="seconds">00</span>:<span id="tens">00</span></p>
<button type="button" class="btn btn-primary">Start</button>
<button type="button" class="btn btn-secondary">Stop</button>
<button type="button" class="btn btn-secondary">Reset</button>
window.onload = function(){
var seconds = 00;
var tens = 00;
var appendTens = document.getElementById("tens");
var appendSeconds = document.getElementById("seconds");
var buttonStart = document.getElementsByClassName('btn btn-primary');
var buttonStop = document.getElementsByClassName("btn btn-secondary");
var buttonReset = document.getElementsByClassName("btn btn-secondary");
var interval;
buttonStart.onclick = function(){
clearInterval(interval);
interval = setInterval(startTimer, 10);
}
buttonStop.onclick = function() {
clearInterval(interval);
}
buttonReset.onclick = function() {
clearInterval(interval);
tens = "00";
seconds = "00";
appendTens.innerHTML = tens;
appendSeconds.innerHTML = seconds;
}
function startTimer () {
tens++;
if(tens < 9){
appendTens.innerHTML = "0" + tens;
}
if (tens > 9){
appendTens.innerHTML = tens;
}
if (tens > 99) {
console.log("seconds");
seconds++;
appendSeconds.innerHTML = "0" + seconds;
tens = 0;
appendTens.innerHTML = "0" + 0;
}
if (seconds > 9){
appendSeconds.innerHTML = seconds;
}
}
}