Idk 出了什么问题，我尝试将 id 添加到按钮，但这也不起作用，所以我又回到使用 querySelect 中的按钮类。我也尝试使用 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>答案 0 :(得分：0)
正确的事件名称是“DOMContentLoaded”。您正在编写“DomContentLoaded”。
答案 1 :(得分：0)
首先你有一个错字'DOMContentLoaded'。
您还需要将事件侦听器附加到单个项目。相反，您已将点击侦听器附加到无法工作的 NodeLists。
您还在 DOMContentLoaded 中声明了一些变量并在其他函数中使用了它们。由于功能范围，这当然不起作用。
您可以检查此工作代码以获得一些想法。
<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>答案 2 :(得分：0)
我用一些更改和注释更新了您的 js 代码。我已经在这里测试过，现在可以使用了。
<!--Navigation Bar here-->
<img src="images/Valorant.png">
<div class="topnav">
<img src="images/Valorant.png">
<a href="#">Home</a>
<a href="#">Gameplay</a>
<a href="#">About</a>
<a href="#">Guides</a>
</div>
<!--Title-->
<h1 id="webname">valoraNt</h1>
<div class="wrapper">
<video id="videoBG" poster="valoClip.png" autoplay muted loop>
<source src="valoClip.mp4" type="video/mp4">
</video>
</div>
<!--Gameplay here-->
<div class="whole">
<div class="left width-40">
<h3 class="paraheader">GAMEPLAY</h3>
<p>
Valorant is an online <abbr title="First Person Shooter">FPS</abbr> game that defy the limits. Blend your style and experience on a global, competitive stage. The game has 13 rounds to attack and defend your side using sharp gunplay and tactical
abilities. And, with one life per-round, you'll need to think faster than your opponent if you want to survive. Take on foes across Competitive and Unranked modes as well as Deathmatch and Spike Rush. There is also a Practice mode or tool to help
you manage your aim.
</p>
<p><a href="https://www.youtube.com/watch?v=e_E9W2vsRbQ" target="_blank"> Watch the trailer here</a></p>
</div>
<!--Agents here-->
<div class="right mt-250 width-40">
<h3 class="paraheader">AGENTS</h3>
<p>
Valorant is a 5v5 tactical shooter where each player plays as a character called an "agent".
<br>
<br> There are currently 15 agents in the game; Astra, Breach, Brimstone, Cypher, Jett, Killjoy, Omen, Phoenix, Raze, Reyna, Sage, Skye, Sova, Viper, Yoru.
</p>
<p>
Each agent has four unique abilities (including ultimate).
<br>
<br> So far, the agent abilities range from traditional utility from realistic shooter such as flasbangs and smoke granades but also include magical or futuristic themed abilities like conjuring walls and sonic arrows that act like a radar.
<br>
<br> There are some agents that will be available for new accounts while other agents have to be unlocked through progression or battle pass system.
</p>
</div>
<!--Guns here-->
<div class="left mt-250 width-40">
<h3 class="paraheader">GUNS</h3>
<p>
Valorant has a buy phase at the beginning of each round. Every agent has access to the same guns and shields in their shop.
<br>
<br> There are currently 17 guns in valorant; Classic, Shorty, Frenzy, Ghost, Sheriff, Stinger, Spectre, Bucky, Judge, Marshal, Operator, Ares, Odin, Bulldog, Guardian, Phantom, Vandal.
</p>
<p>
Every agent has a primary weapon slot (SMGs, Shotguns, Snipers, and Heavy Machine Guns), a secondary sidearm slot, and a knife.
<br>
<br> During the buy phase, players can sell their sidearm or primary, request a teammate to buy a gun for them if they're low on funds, announce that they have extra funds to purchase for a teammate, or tell them to save their money for the round.
</p>
<p>
Guns vary in terms of:
<ul>
<li>Primary and alt fire settings</li>
<li>Damage output (based on head/body/legs)</li>
<li>Magazine capacity</li>
<li>Recoil pattern</li>
<li>Ability to pierce through walls</li>
</ul>
</p>
</div>
<!--Maps here-->
<div class="right mt-250 width-40">
<h3 class="paraheader">MAPS</h3>
<p>
So far there are 5 maps with one objective: planting or defending against a bomb called "spike".
<br>
<br> The 5 playable maps are:
<ul>
<li>Bind</li>
<li>Haven</li>
<li>Split</li>
<li>Ascent</li>
<li>Icebox</li>
</ul>
</p>
<p>
Each map also has two ultimate orbs in neutral locations that teams can try to grab. The orb grants one point the ulimate of the agent who picked it up.
<br>
<br> Another general thing to note is that some walls and terrain can be fired through. As a rule of thumb, anything that leaves a bullter hole can be penetrated.
</p>
</div>
<!--Shooting Range here-->
<div class="left mt-250 width-40">
<h5 class="paraheader">SHOOTING RaNGE</h5>
<p>
The last existing map is dedicated to practicing and honing your skills. Here you can change your agent and guns at anytime (you can even teset characters that you do not own yet).
<br>
<br> At the shooting range, you can shoot at dummies that spawn at different speeds and settings such as strafing.
<br>
<br> There is also an area dedicated to shooting long-distance targets to test the effective range of guns.
<br>
<br> Lastly, you can also practice scenarios such as planting a spike and then defending against bots to improve your composure and ability in clutch situations.
</p>
</div>
</div>