为什么我的 javascript 上的按钮在单击时没有响应？
[英]Why are my buttons on javascript not responding when clicked?
问题描述
Idk whats wrong, I tried adding id to buttons and that didn't work either so I just went back to using the class of the buttons in querySelect. 
Idk 出了什么问题，我尝试将 id 添加到按钮，但这也不起作用，所以我只是回到使用 querySelect 中按钮的 class。 I also tried using onclick and still no response.我也尝试使用 onclick 仍然没有响应。 The button is supposed to turn green or red when clicked depending on whether it is correct.该按钮应该在单击时变为绿色或红色，具体取决于它是否正确。 There are also no errors in developer tools.开发人员工具中也没有错误。
< 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>
3 个解决方案
解决方案1
0 2021-03-27 01:08:29
The correct event name is "DOMContentLoaded".正确的事件名称是“DOMContentLoaded”。 You are writting "DomContentLoaded".您正在编写“DomContentLoaded”。
解决方案2
0 2021-03-27 01:25:45
First of all you have a typo 'DOMContentLoaded' .首先，您有一个错字'DOMContentLoaded' 。
Also you need to attach event listener to an individual item.您还需要将事件侦听器附加到单个项目。 Instead you've attached the click listener to an NodeLists which won't work.相反，您已将单击侦听器附加到不起作用的NodeLists 。
Also you've declared some variable inside DOMContentLoaded and used them inside other function.您还在DOMContentLoaded中声明了一些变量，并在其他 function 中使用了它们。 Which of course won't work because of functional scoping.由于功能范围，这当然不起作用。
You can check this working code to get some idea.您可以检查此工作代码以获得一些想法。
<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>
解决方案3
0 2021-03-27 02:47:40
I updated your js code with some changes and comments.我用一些更改和评论更新了你的 js 代码。 I've tested here and now it works.我在这里测试过，现在可以了。
//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.