0

我正在使用引导程序通过以下方式在 HTML 文件中设置我的按钮样式：

<button type="button" class="btn btn-primary">Start</button>

我想通过访问js文件中的类

var buttonStart = document.getElementsByClassName('btn btn-primary');

我在控制台中得到了错误。我的代码有问题吗？

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;
    }

  }
}
4

2 回答 2

1

主要问题是您正在<button>使用getElementsByClassName. 此方法返回HTML Collection行为类似于数组（技术上类似于对象的数组）的 a。因此，要解决此问题，您需要引用该集合的第一个元素：

var buttonStart = document.getElementsByClassName('btn btn-primary')[0]

下面的工作示例：

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')[0];
  var buttonStop = document.getElementsByClassName("btn btn-secondary")[0];
  var buttonReset = document.getElementsByClassName("btn btn-tertiary")[0];
  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;
    }

  }
}
<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-tertiary">Reset</button>

使用 ID 可能是一个更好的主意，getElementById或者如果您想继续使用可以使用的那些类querySelector，它将返回与该特定类匹配的第一个元素。

注意：我修改了第三个类，btn-tertiary以便示例可以工作。

于 2020-04-06T18:51:23.317 回答
0

您需要添加 3 个偶数侦听器并正确定义您的函数，代码很好。

     
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')[0];
    var buttonStop = document.getElementsByClassName("btn btn-secondary")[0];
    var buttonReset = document.getElementsByClassName("btn btn-secondary")[1];
    var interval;

    buttonStart.addEventListener("click", start);

    function start() {        
        clearInterval(interval);
        interval = setInterval(startTimer, 10);
    }
    buttonStop.addEventListener("click", stop);
  function stop() {
        clearInterval(interval);
    }


   buttonReset.addEventListener("click", restart);
  function restart() {
      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;
    }

  }
}
     <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>

于 2020-04-06T18:40:46.183 回答