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

Question

我是 javascript 和 HTML 的初學者。 現在正在處理我的在線課程作業。 我目前正在使用 HTML、CSS 和 javascript 制作 3 分鍾計時器。 我在網上借用了 javascript 代碼表並更改了一些代碼以了解用 javascript 編寫的內容。 我有兩個問題...

一種是當我把addEventListener('click', startTimer(), false); 它似乎無法正常工作，更像是它已經在 javascript 文件中觸發了功能。 所以我想知道為什么會這樣。

其次是innerHTML 不起作用。 我試着把document.getElementsByClassName('start').innerHTML = "START"; 在 javascript 文件中，但我在網頁上沒有看到“開始”。 我實際上不需要為 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];

注意：方括號。

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

問題描述

1 個解決方案

解決方案1
1 2019-12-21 03:16:02

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

問題描述

1 個解決方案

解決方案1 1 2019-12-21 03:16:02

解決方案1
1 2019-12-21 03:16:02