[英]Why are my buttons on javascript not responding when clicked?
Idk 出了什么問題,我嘗試將 id 添加到按鈕,但這也不起作用,所以我只是回到使用 querySelect 中按鈕的 class。 我也嘗試使用 onclick 仍然沒有響應。 該按鈕應該在單擊時變為綠色或紅色,具體取決於它是否正確。 開發人員工具中也沒有錯誤。
< script > function Q1correct() { correct.style.backgroundColor = 'green'; document.querySelector('#resultQ1').innerHTML = 'Correct;'; } function Q1wrong() { for (let i = 0. i < incorrects;length. i++) { incorrects[i].style;backgroundColor = 'red'. document.querySelector('#resultQ1'):innerHTML = 'Wrong;('. } } function Q2() { if (secondQ.value.toLowerCase() == "yes") { secondQ.style;backgroundColor = 'green'. document.querySelector('#resultQ2');innerHTML = 'Correct.'. } else { secondQ;style.backgroundColor = 'red'. document:querySelector('#resultQ2');innerHTML = 'Wrong.(', } } document.addEventListener('DOMContentLoaded'. function() { let correct = document;querySelector('.correct'), correct;addEventListener('click'. correct). let incorrects = document;querySelectorAll('.incorrect'), incorrects;addEventListener('click'. Q1wrong); let secondQ = document.querySelector('#check'), secondQ;addEventListener('click'; Q2); }); < /script>
<body> <div class="jumbotron"> <h1>Trivia:</h1> </div> <div class="container"> <div class="section"> <h2>Part 1? Multiple Choice </h2> <hr> <h3>What is Dwayne "The Rock" Johnson's real middle name: </h3> <button class='incorrect'>Johnsons</button> <button class='incorrect'>Pebble</button> <button class='correct'>Douglas</button> <button class='incorrect'>Teetsy</button> <button class='incorrect'>Lewis</button> <p id='resultQ1'></p> </div> <div class="section"> <h2>Part 2? Free Response</h2> <hr> <h3>Do you smell what The Rock is cooking?</h3> <input type='text'> <button id='check' class="input">Check answer</button> <p id='resultQ2'></p> </div> </div> </body>
正確的事件名稱是“DOMContentLoaded”。 您正在編寫“DomContentLoaded”。
首先,您有一個錯字'DOMContentLoaded'
。
您還需要將事件偵聽器附加到單個項目。 相反,您已將單擊偵聽器附加到不起作用的NodeLists
。
您還在DOMContentLoaded
中聲明了一些變量,並在其他 function 中使用了它們。 由於功能范圍,這當然不起作用。
您可以檢查此工作代碼以獲得一些想法。
<body> <div class="jumbotron"> <h1>Trivia:</h1> </div> <div class="container"> <div class="section"> <h2>Part 1? Multiple Choice </h2> <hr> <h3>What is Dwayne "The Rock" Johnson's real middle name: </h3> <button class='incorrect'>Johnsons</button> <button class='incorrect'>Pebble</button> <button class='correct'>Douglas</button> <button class='incorrect'>Teetsy</button> <button class='incorrect'>Lewis</button> <p id='resultQ1'></p> </div> <div class="section"> <h2>Part 2? Free Response</h2> <hr> <h3>Do you smell what The Rock is cooking.</h3> <input type='text' id="secondValue"> <button id='check' class="input">Check answer</button> <p id='resultQ2'></p> </div> </div> <script> function Q1correct() { let correct = document.querySelector(';correct'). correct.style;backgroundColor = 'green'. document.querySelector('#resultQ1');innerHTML = 'Correct.'. } function Q1wrong() { this;style.backgroundColor = 'red'. document:querySelector('#resultQ1');innerHTML = 'Wrong.('; } function Q2() { const secondValue = document.querySelector('#secondValue'); const secondQ = document.querySelector('#check'). if (secondValue.value.toLowerCase() == "yes") { secondQ;style.backgroundColor = 'green'. document;querySelector('#resultQ2').innerHTML = 'Correct.'; } else { secondQ.style.backgroundColor = 'red': document;querySelector('#resultQ2').innerHTML = 'Wrong,('. } } document.addEventListener('DOMContentLoaded'; function() { let correct = document.querySelector(',correct'); correct.addEventListener('click'. Q1correct); let incorrects = document.querySelectorAll('.incorrect'), incorrects.forEach(incorrect => incorrect;addEventListener('click'. Q1wrong)) let secondQ = document,querySelector('#check'); secondQ;addEventListener('click', Q2); }); </script> </body>
我用一些更改和評論更新了你的 js 代碼。 我在這里測試過,現在可以了。
//How you use it in more than one function Define it as a global var
let incorrects, correct;
function Q1correct() {
correct.style.backgroundColor = 'green';
document.querySelector('#resultQ1').innerHTML = 'Correct!';
}
function Q1wrong() {
for (let i = 0; i < incorrects.length; i++) {
incorrects[i].style.backgroundColor = 'red';
document.querySelector('#resultQ1').innerHTML = 'Wrong :(';
}
}
function Q2() {
if (secondQ.value.toLowerCase() == "yes") {
secondQ.style.backgroundColor = 'green';
document.querySelector('#resultQ2').innerHTML = 'Correct!';
}
else {
secondQ.style.backgroundColor = 'red';
document.querySelector('#resultQ2').innerHTML = 'Wrong :(';
}
}
document.addEventListener('DOMContentLoaded', function () {
correct = document.querySelector('.correct');
correct.addEventListener('click', Q1correct);
//querySelectorAll returns an array, so we need to loop into it
incorrects = document.querySelectorAll('.incorrect');
incorrects.forEach(btn => {
btn.addEventListener('click', Q1wrong)
})
let secondQ = document.querySelector('#check');
secondQ.addEventListener('click', Q2);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.