javascript - 使用 JavaScript 显示隐藏的 html 按钮

Question

我正在尝试创建一个测验，但在开始页面之后我不确定如何显示答案选择。我已经在 html 中为选项创建了按钮，并将它们作为隐藏启动，并在 javascript 中为它们分配。我有一个数组中的问题和答案，但我坚持在问题下显示选择按钮。在初始起始页面之后。

<div class="wrapper text-center">
        <header>
            <h1>Coding Quiz</h1>
            </header>
            <div class="card">
            </div>
            <div class="card-body">
                <p id="header"> You have 75 seconds to complete this asessment. Every
                    incorrect answer will cost you time.
                <br>
                </p>
                <button id="start-button" class="btn">Start</button>
                 <div id="start-game" style="visibility: hidden">
                    <button id="option0"  data-index="0"></button><br>
                    <button id="option1"  data-index="1"></button><br>
                    <button id="option2"  data-index="2"></button><br>
                    <button id="option3"  data-index="3"></button><br>
                </div>
            </div>

          </div>

var timerEl = document.getElementById("timer");
var start = document.getElementById("start-button");
var questionEl = document.getElementById("header");
var option0 = document.getElementById("option0");
var option1 = document.getElementById("option1");
var option2 = document.getElementById("option2");
var option3 = document.getElementById("option3");
var intials = document.getElementById("user-initials");
var buttonEl = document.querySelector("start-game");
var totalTime = 75;
var elapsedTime = 0;
var questionNum = 0;
var questions =["The condition in an if/else statement is enclosed with in _______",
                "Arrays in JavaScript can be used to store ______",
                "Commonly used data types do not include ______",
                "String values must be enclosed within _____ when being assigned to variables"];

var answers =[question1= ["Quotes","Curly brackets","Parentheses","Square brackets"],
             question2= ["Numbers and strings","Other arrays","Booleans","All of the above"],
             question3= ["Strings","Booleans","Alerts","Numbers"],
             question4= ["Commas","Curly brackets","quotes","parentheses"]
            ];             

var correctAnswers = [2,3,2,2];

start.addEventListener("click", function(){
    timer();
    displayQuestion();
    start.style.visibility = "hidden";
    buttonEl.style.visibility = "visible";
});



function timer(){

    var timerInterval = setInterval(function(){
        totalTime--;
        timerEl.textContent = totalTime;

        if(totalTime === 0){
         function stopTimer(){
         clearInterval(timerInterval);
        endQuiz();
        return;
        }
    }
    }, 1000)
}

function newQuiz(){
    questionEl.textContent = (questions[0]);

};


function decreaseTimer (){
    timerEl.text(totalTime);
    while(elapsedTime < 75){
        elapesedTime += 1;
    }
    endQuiz();
    totalTime = totalTime - elapsedTime;
    timerEl.textContent = totalTime;

}
function displayQuestion(){
for( var i = 0; i < questions.length ; i++){

    questionEl.textContent=(questions[i]);
    option0.textContent=(answers[i][0]);
    option1.textContent=(answers[i][1]);
    option2.textContent=(answers[i][2]);
    option3.textContent=(answers[i][3]);

}
}

标签： javascripthtml

Answer 1

var buttonEl = document.querySelector("start-game");

应该

var buttonEl = document.getElementById("start-game");

var timerEl = document.getElementById("timer");
var start = document.getElementById("start-button");
var questionEl = document.getElementById("header");
var option0 = document.getElementById("option0");
var option1 = document.getElementById("option1");
var option2 = document.getElementById("option2");
var option3 = document.getElementById("option3");
var intials = document.getElementById("user-initials");
var buttonEl = document.getElementById("start-game");
var totalTime = 75;
var elapsedTime = 0;
var questionNum = 0;
var questions =["The condition in an if/else statement is enclosed with in _______",
                "Arrays in JavaScript can be used to store ______",
                "Commonly used data types do not include ______",
                "String values must be enclosed within _____ when being assigned to variables"];

var answers =[question1= ["Quotes","Curly brackets","Parentheses","Square brackets"],
             question2= ["Numbers and strings","Other arrays","Booleans","All of the above"],
             question3= ["Strings","Booleans","Alerts","Numbers"],
             question4= ["Commas","Curly brackets","quotes","parentheses"]
            ];             

var correctAnswers = [2,3,2,2];

start.addEventListener("click", function(){
    timer();
    displayQuestion();
    start.style.visibility = "hidden";
    buttonEl.style.visibility = "visible";
});



function timer(){

    var timerInterval = setInterval(function(){
        totalTime--;
        timerEl.textContent = totalTime;

        if(totalTime === 0){
         function stopTimer(){
         clearInterval(timerInterval);
        endQuiz();
        return;
        }
    }
    }, 1000)
}

function newQuiz(){
    questionEl.textContent = (questions[0]);

};


function decreaseTimer (){
    timerEl.text(totalTime);
    while(elapsedTime < 75){
        elapesedTime += 1;
    }
    endQuiz();
    totalTime = totalTime - elapsedTime;
    timerEl.textContent = totalTime;

}
function displayQuestion(){
for( var i = 0; i < questions.length ; i++){

    questionEl.textContent=(questions[i]);
    option0.textContent=(answers[i][0]);
    option1.textContent=(answers[i][1]);
    option2.textContent=(answers[i][2]);
    option3.textContent=(answers[i][3]);

}
}

<div class="wrapper text-center">
        <header>
            <h1>Coding Quiz</h1>
            </header>
            <div class="card">
            </div>
            <div class="card-body">
                <p id="header"> You have 75 seconds to complete this asessment. Every
                    incorrect answer will cost you time.
                <br>
                </p>
                <button id="start-button" class="btn">Start</button>
                 <div id="start-game" style="visibility: hidden">
                    <button id="option0"  data-index="0"></button><br>
                    <button id="option1"  data-index="1"></button><br>
                    <button id="option2"  data-index="2"></button><br>
                    <button id="option3"  data-index="3"></button><br>
                </div>
            </div>

          </div>
          <div id="timer"></div>