为什么我的 javascript 上的按钮在单击时没有响应？

Question

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>

Answer 1

正确的事件名称是“DOMContentLoaded”。 您正在编写“DomContentLoaded”。

Answer 2

首先，您有一个错字'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>

Answer 3

我用一些更改和评论更新了你的 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);
});

为什么我的 javascript 上的按钮在单击时没有响应？

问题描述

3 个解决方案

解决方案1
0 2021-03-27 01:08:29

解决方案2
0 2021-03-27 01:25:45

解决方案3
0 2021-03-27 02:47:40

为什么我的 javascript 上的按钮在单击时没有响应？

问题描述

3 个解决方案

解决方案1 0 2021-03-27 01:08:29

解决方案2 0 2021-03-27 01:25:45

解决方案3 0 2021-03-27 02:47:40

解决方案1
0 2021-03-27 01:08:29

解决方案2
0 2021-03-27 01:25:45

解决方案3
0 2021-03-27 02:47:40