如何获取按钮的值？

Question

我想检查用户点击的按钮是否正确然后我会做一些事情。为此，我使用 if 语句检查按钮的值是否与 "questions" 数组中的 "correct" 属性匹配。到目前为止，我已经尝试了这些解决方案并且 none 有效：

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++;


});

此外，当我在最后一个问题后单击按钮时，我在控制台中收到此错误：

Uncaught TypeError: Cannot read property 'correct' of undefined
at HTMLDivElement.<anonymous> (quiz.js:69)

我试过了，但没用：


if(questions[i].question === undefined) {

/* do Something */
}

Answer 1

1.The i++在你的start_btn点击开始后题目索引错误

2.The 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>

如何获取按钮的值？

How to get button's value?

html

javascript

css

dom

jquery-events