我想检查用户单击的按钮是否正确，然后我将做一些事情。为此，我使用if语句来检查按钮的值是否与“问题”数组中的“正确”属性匹配。到目前为止，我已经尝试了这些解决方案，但都无济于事：
if (e.target.tagName === "BUTTON" && e.target.innerText === questions[i].correct) {
alert("correct"); /* testing */
}
if (e.target.tagName === "BUTTON" && e.target.textContent === questions[i].correct) {
alert("correct"); /* testing */
}
if (e.target.tagName === "BUTTON" && e.target.value === questions[i].correct) {
alert("correct"); /* testing */
}
if (e.target.tagName === "BUTTON" && e.target.innerHTML === questions[i].correct) {
alert("correct"); /* testing */
}
这是html：
<!DOCTYPE html>
<html>
<head>
<title>Quiz Game</title>
<link rel="stylesheet" type="text/css" href="quiz.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<p>Question <span class="qtn-count">1</span> of 5</p>
<p>Score: 0</p>
<p id="question"></p>
<div id="btns-wrapper">
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
</div>
</div>
<button class="btn" id="start-btn">Start</button>
<script type="text/javascript" src="quiz.js"></script>
</body>
</html>
这是CSS：
body {
font-family: 'Roboto Slab', serif;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
box-sizing: border-box;
background: #E987FF;
background: -moz-linear-gradient(left, #E987FF 0%, #B7DB81 50%, #FFEBEB 100%);
background: -webkit-linear-gradient(left, #E987FF 0%, #B7DB81 50%, #FFEBEB 100%);
background: linear-gradient(to right, #E987FF 0%, #B7DB81 50%, #FFEBEB 100%);
}
#question {
font-size: 20px;
flex-grow: 4;
text-align: center;
}
.btn {
background: rgb(240,248,255);
font-family: 'Roboto Slab', serif;
border: none;
border-radius: 5px;
outline: none;
text-shadow: 2px 2px 5px rgba(0,0,0,0.44);
cursor: pointer;
height: 50px;
width: 90%;
}
#btns-wrapper {
display: flex;
flex-direction: column;
margin: auto;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
width: 90%;
height: 50vh;
}
#wrapper {
-webkit-box-shadow: 4px 2px 17px 7px rgba(0,0,0,0.15);
box-shadow: 4px 2px 17px 7px rgba(0,0,0,0.15);
width: 90%;
font-family: 'Roboto Slab', serif;
background: #61FF68;
background: -moz-linear-gradient(left, #61FF68 0%, #4AC44F 50%, #6BFF98 100%);
background: -webkit-linear-gradient(left, #61FF68 0%, #4AC44F 50%, #6BFF98 100%);
background: linear-gradient(to right, #61FF68 0%, #4AC44F 50%, #6BFF98 100%);
display: none;
}
@media only screen and (min-width: 760px) {
#wrapper {
width: 50%;
}
#btns-wrapper {
display: flex;
flex-direction: row;
}
.btn {
width: 40%;
}
#question {
font-size: 30px;
}
}
和JavaScript：
const questions = [
{
question: "What is 2 + 2?",
answers: [3,4,2,5],
correct: 4
},
{
question: "What is 5 + 2?",
answers: [7,3,2,2],
correct: 7
},
{
question: "What is 10 + 20?",
answers: [35,40,24,30],
correct: 30
},
{
question: "What is 2 + 3?",
answers: [1,7,2,5],
correct: 5
}
]
const btn = document.getElementsByClassName("btn")
const btns_wrapper = document.getElementById("btns-wrapper");
const qtn = document.getElementById("question");
let i=0;
const start_btn = document.getElementById("start-btn");
const content = document.getElementById("wrapper");
start_btn.addEventListener("click" , ()=> {
content.style.display = "block";
start_btn.style.display = "none";
qtn.textContent = questions[i].question
btn[0].textContent = questions[0].answers[0];
btn[1].textContent = questions[0].answers[1];
btn[2].textContent = questions[0].answers[2];
btn[3].textContent = questions[0].answers[3];
i++;
});
btns_wrapper.addEventListener("click" , (e)=> {
if (e.target.tagName === "BUTTON" && e.target.innerText === questions[i].correct) {
alert("correct"); /* testing */
}
qtn.textContent = questions[i].question;
btn[0].textContent = questions[i].answers[0];
btn[1].textContent = questions[i].answers[1];
btn[2].textContent = questions[i].answers[2];
btn[3].textContent = questions[i].answers[3];
i++;
});
当我在最后一个问题后单击按钮时，也会在控制台中收到此错误：
未捕获的TypeError：无法读取未定义的属性“正确”
在HTMLDivElement。（quiz.js：69）
我尝试过，但是没有用：
if(questions[i].question === undefined) {
/* do Something */
}
答案 0 :(得分：1)
1。i++中的start_btn单击后，开始将问题索引错误。
2。单击i++中的btns_wrapper应该是在将文本分配给html之前。
3。e.target.innerText是字符串，而questions[i].correct是数字，因此比较应该是e.target.innerText === questions[i].correct.toString()或e.target.innerText == questions[i].correct。
工作版本：
const questions = [
{
question: "What is 2 + 2?",
answers: [3,4,2,5],
correct: 4
},
{
question: "What is 5 + 2?",
answers: [7,3,2,2],
correct: 7
},
{
question: "What is 10 + 20?",
answers: [35,40,24,30],
correct: 30
},
{
question: "What is 2 + 3?",
answers: [1,7,2,5],
correct: 5
}
]
const btn = document.getElementsByClassName("btn")
const btns_wrapper = document.getElementById("btns-wrapper");
const qtn = document.getElementById("question");
let i=0;
const start_btn = document.getElementById("start-btn");
const content = document.getElementById("wrapper");
start_btn.addEventListener("click" , ()=> {
content.style.display = "block";
start_btn.style.display = "none";
qtn.textContent = questions[i].question
btn[0].textContent = questions[i].answers[0];
btn[1].textContent = questions[i].answers[1];
btn[2].textContent = questions[i].answers[2];
btn[3].textContent = questions[i].answers[3];
});
btns_wrapper.addEventListener("click" , (e)=> {
if (e.target.tagName === "BUTTON" && e.target.innerText === questions[i].correct.toString()) {
alert("correct"); /* testing */
}
i++;
qtn.textContent = questions[i].question;
btn[0].textContent = questions[i].answers[0];
btn[1].textContent = questions[i].answers[1];
btn[2].textContent = questions[i].answers[2];
btn[3].textContent = questions[i].answers[3];
});body {
font-family: 'Roboto Slab', serif;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
box-sizing: border-box;
background: #E987FF;
background: -moz-linear-gradient(left, #E987FF 0%, #B7DB81 50%, #FFEBEB 100%);
background: -webkit-linear-gradient(left, #E987FF 0%, #B7DB81 50%, #FFEBEB 100%);
background: linear-gradient(to right, #E987FF 0%, #B7DB81 50%, #FFEBEB 100%);
}
#question {
font-size: 20px;
flex-grow: 4;
text-align: center;
}
.btn {
background: rgb(240,248,255);
font-family: 'Roboto Slab', serif;
border: none;
border-radius: 5px;
outline: none;
text-shadow: 2px 2px 5px rgba(0,0,0,0.44);
cursor: pointer;
height: 50px;
width: 90%;
}
#btns-wrapper {
display: flex;
flex-direction: column;
margin: auto;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
width: 90%;
height: 50vh;
}
#wrapper {
-webkit-box-shadow: 4px 2px 17px 7px rgba(0,0,0,0.15);
box-shadow: 4px 2px 17px 7px rgba(0,0,0,0.15);
width: 90%;
font-family: 'Roboto Slab', serif;
background: #61FF68;
background: -moz-linear-gradient(left, #61FF68 0%, #4AC44F 50%, #6BFF98 100%);
background: -webkit-linear-gradient(left, #61FF68 0%, #4AC44F 50%, #6BFF98 100%);
background: linear-gradient(to right, #61FF68 0%, #4AC44F 50%, #6BFF98 100%);
display: none;
}
@media only screen and (min-width: 760px) {
#wrapper {
width: 50%;
}
#btns-wrapper {
display: flex;
flex-direction: row;
}
.btn {
width: 40%;
}
#question {
font-size: 30px;
}<html>
<head>
<title>Quiz Game</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<p>Question <span class="qtn-count">1</span> of 5</p>
<p>Score: 0</p>
<p id="question"></p>
<div id="btns-wrapper">
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
</div>
</div>
<button class="btn" id="start-btn">Start</button>
</body>
</html>