我的CS50实验室8琐事网站的按钮坏了
我的CS50实验室8琐事网站的按钮坏了
提问于 2021-07-31 11:24:39
这是我的网站的html和javascript代码，有两个问题：
- 第一个问题有4个按钮，包含4个选项，其中只有一个正确答案。
- 第二个问题是基于文本的自由回答。
当我点击问题1的按钮或问题2的“检查答案”按钮时，什么都不会发生。如能提供任何帮助，将不胜感激。
<script>
// TODO: Add code to check answers to questions
//run the script once the DOM is loaded
document.addEventListener('DOMContentloaded', function(){
//when correct answer is clicked change button colour to green
let correct = document.querySelector('.correct');
correct.addEventListner('click', function(){
correct.style.backgroundColor = 'green';
document.querySelector('#feedback1').innerHTML = 'Correct!';
});
//When any incorrect answer is clicked, change color to red.
let incorrects = document.querySelectorAll('.incorrect');
for (let i=0; i < incorrects.length; i++){
incorrects[i].addEventListener('click', function() {
incorrects[i].style.backgroundColor = 'red';
document.querySelector('#feedback1').innerHTML = 'Incorrect';
});
}
//check free response submission
document.querySelector('#check').addEventListner('click', function(){
let input = document.querySelector('input');
if (input.value === 'Switzerland'){
input.style.backgroundColor = 'green';
document.querySelector('#feedback2').innerHTML = 'Correct!';
}else{
input.style.backgroundColor = 'red';
document.querySelector('#feedback2').innerHTML = 'Incorrect';
}
});
});
</script>
</head>
<body>
<div class="jumbotron">
<h1>Trivia!</h1>
</div>
<div class="container">
<div class="section">
<h2>Part 1: Multiple Choice </h2>
<hr>
<!-- TODO: Add multiple choice question here -->
<h3>What is the approximate ratio of people to sheep in New zealand?</h3>
<button class="incorrect">6 people per 1 sheep</button>
<button class="incorrect">3 people per 1 sheep</button>
<button class="incorrect">1 person per 1 sheep</button>
<button class="incorrect">1 person per 3 sheep</button>
<button class="correct">1 person per 6 sheep</button>
<p id="feedback1"></p>
</div>
<div class="section">
<h2>Part 2: Free Response</h2>
<hr>
<!-- TODO: Add free response question here -->
<h3>In which country is it illegal to own one guinea pig, as a lone guinea pig might be lonely?</h3>
<input type="text"></input>
<button id="check">Check Answer</button>
<p id="feedback2"></p>
</div>
</div>
</body>回答 1
Stack Overflow用户
发布于 2021-07-31 15:17:44
你所做的实际上是正确的，但有两个问题。
- 你的
addEventListener有两处拼写错误，这就是你的->addEventListner - 您使用的是
document.addEventListener('DOMContentloaded', function(){而不是window.addEventListener("load", function () {。请参考其他的来源，详细的时候，你应该是其中之一。(有用源)
您已经实现的代码并不是最好的javascript和HTML实践，比如通过输入查询，不把脚本放在末尾，但是如果您正在开始，您做得不错。此外，您还可以使用浏览器开发工具来调试和检查错误。
下面是代码的更正和工作版本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="jumbotron">
<h1>Trivia!</h1>
</div>
<div class="container">
<div class="section">
<h2>Part 1: Multiple Choice </h2>
<hr>
<!-- TODO: Add multiple choice question here -->
<h3>What is the approximate ratio of people to sheep in New zealand?</h3>
<button class="incorrect">6 people per 1 sheep</button>
<button class="incorrect">3 people per 1 sheep</button>
<button class="incorrect">1 person per 1 sheep</button>
<button class="incorrect">1 person per 3 sheep</button>
<button class="correct">1 person per 6 sheep</button>
<p id="feedback1"></p>
</div>
<div class="section">
<h2>Part 2: Free Response</h2>
<hr>
<!-- TODO: Add free response question here -->
<h3>In which country is it illegal to own one guinea pig, as a lone guinea pig might be lonely?</h3>
<input type="text"></input>
<button id="check">Check Answer</button>
<p id="feedback2"></p>
</div>
</div>
<script>
// TODO: Add code to check answers to questions
//run the script once the DOM is loaded
window.addEventListener("load", function () {
//when correct answer is clicked change button colour to green
let correct = document.querySelector('.correct');
correct.addEventListener('click', function () {
correct.style.backgroundColor = 'green';
document.querySelector('#feedback1').innerHTML = 'Correct!';
});
//When any incorrect answer is clicked, change color to red.
let incorrects = document.querySelectorAll('.incorrect');
for (let i = 0; i < incorrects.length; i++) {
incorrects[i].addEventListener('click', function () {
incorrects[i].style.backgroundColor = 'red';
document.querySelector('#feedback1').innerHTML = 'Incorrect';
});
}
//check free response submission
document.querySelector('#check').addEventListener('click', function () {
let input = document.querySelector('input');
if (input.value === 'Switzerland') {
input.style.backgroundColor = 'green';
document.querySelector('#feedback2').innerHTML = 'Correct!';
} else {
input.style.backgroundColor = 'red';
document.querySelector('#feedback2').innerHTML = 'Incorrect';
}
});
});
</script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68601638
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号