Question

我是javascript和HTML的初学者。现在正在通过在线课程从事我的作业。我目前正在使用HTML，CSS和javascript进行3分钟的计时器。我在线上借用了javascript代码表单，并更改了一些代码以了解javascript的内容。我有两个问题...

一个是当我放入 addEventListener（'click'，startTimer（），false）; 时，它似乎无法正常工作，更像是已经在javascript文件中触发了功能。所以我想知道为什么会这样。

第二个原因是innerHTML无法正常工作。我试图将 document.getElementsByClassName（'start'）。innerHTML =“ START”; 放入JavaScript文件中，但在网页上看不到“ START”。我实际上不需要为START按钮插入innerHTML，但是我尝试使用innerHTML更改其他HTML部分，该部分不起作用，所以我想知道为什么会这样。

有人知道如何使它们工作吗？

谢谢！

  document.getElementById('timer').innerHTML = "03" + ":" + "00";
    document.getElementsByClassName('start').innerHTML = "START";
    var start = document.getElementsByClassName('start');
    start.addEventListener('click', startTimer(), false);
    var stop = document.getElementsByClassName('stop');
    stop.removeEventListener('click', startTimer(), false);
    var reset = document.getElementsByClassName('reset');

    function startTimer() {
      var presentTime = document.getElementById('timer').innerHTML;
      var timeArray = presentTime.split(/[:]+/);
      var m = timeArray[0];
      var s = checkSecond((timeArray[1] - 1));
      if(s==59){m=m-1}
      //if(m<0){alert('timer completed')}
      
      document.getElementById('timer').innerHTML =
        m + ":" + s;
      console.log(m)
      setTimeout(startTimer, 1000);
    }

    function checkSecond(sec) {
      if (sec < 10 && sec >= 0) {sec = "0" + sec}; // add zero in front of numbers < 10
      if (sec < 0) {sec = "59"};
      return sec;
    }

<!DOCTYPE html>
        <html class="no-js" lang="ja">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <title id="countdown-timer">3 Minutes Timer</title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="style.css">
        </head>
        <body>
            <div class="timer-title">
                <p>3 Minutes Timer</p>
            </div>
            <div class="timer-box">
                <div class="timer-outer-display">
                    <div class="timer-display">
                        <div>
                            <p id="timer" ></p>
                        </div>
                    </div>
                </div>
                <div class="button">
                    <button class="start"></button>
                    <button class="stop">STOP</button>
                    <button class="reset">RESET</button>
                    
                </div>
            </div>
            <script type="text/javascript" src="main.js"></script>
        </body>
    </html>

Answer 1

您忘了标出集合的元素编号...

var start = document.getElementsByClassName('start')[0];

NB：方括号。

innerHTML和addEventListener在html和javascript网站上不起作用

1 个答案: