将 Dom 元素更改为不可见 [关闭]

Question

我需要使变量“answer”和“submit”不可见，我尝试在 javascript 文件的第 21-22 行执行此操作，但它不起作用 我怎样才能让它们不可见？

javascript 和 html 代码：

let question = document.getElementById("question");
let answer = document.getElementById("answer");
let submit = document.getElementById("submit");

//create an array of questions
let questions = ["What type of file do you need to open javascript file ?", "question 2", "question 3", "question 4", "question 5", "question 6", "question 7", "question 8", "question 9", "question 10"];

//create an array of answers
let answers = ["js", "answer 2", "answer 3", "answer 4", "answer 5", "answer 6", "answer 7", "answer 8", "answer 9", "answer 10"];

// set the question varible to the first question in the array
let questionNumber = 0;
question.innerText = questions[questionNumber];

let points = 0;
let counter = 0;

submit.addEventListener("click", function(){
    if(counter == questions.length - 1){
        question.innerText = "You got " + points + " out of " + questions.length * 10 + " points";
        answer.style.display = "none";
        submit.style.display = "none";
    }
    answer = document.getElementById("answer").value;
    if(answer == answers[questionNumber]){
        points +=10;
        console.log("correct");
    }   
    else{
        console.log("incorrect" + " " + "the correct answer is " + answers[questionNumber]);
        if(points < 10){
            points = 0;
        }
        else{
            points -= 10;
        }
    }
    //in the else I check if the user have more than 10 points and if so I decrement the points by 10 but id no then I set the points to 0
    questionNumber++;
    counter++;
    question.innerText = questions[questionNumber];
});

<div class="container">
    <span id="question"></span>
    <div class="input-group flex-nowrap">
      <input type="text" id="answer" class="form-control" placeholder="Answer Here..." aria-label="Username" aria-describedby="addon-wrapping">
    </div>
    <button type="button" id="submit" class="btn btn-outline-success">Submit</button>
  </div>

Answer 1

元素选择变量应设置为const，因为元素不会仅更改其内容。这将防止您在代码中出现的错误，这将在下一段中说明。

在事件侦听器函数中，我将answer 变量更改为answerValue，因为您无法将const 设置更改为元素。因此，您需要将该数据存储为不同的名称。在您的代码中，您试图在值而不是元素上调用样式属性。这是因为您在每次调用函数时将答案从元素更改为值。

const question = document.getElementById("question");
const answer = document.getElementById("answer");
const submit = document.getElementById("submit");

//create an array of questions
let questions = ["What type of file do you need to open javascript file ?", "question 2", "question 3", "question 4", "question 5", "question 6", "question 7", "question 8", "question 9", "question 10"];

//create an array of answers
let answers = ["js", "answer 2", "answer 3", "answer 4", "answer 5", "answer 6", "answer 7", "answer 8", "answer 9", "answer 10"];

// set the question varible to the first question in the array
let questionNumber = 0;
question.innerText = questions[questionNumber];

let points = 0;
let counter = 0;

submit.addEventListener("click", function () {
    if (counter == questions.length - 1) {
        question.innerText = "You got " + points + " out of " + questions.length * 10 + " points";
        answer.style.display = "none";
        submit.style.display = "none";
    }
    // here I changed it to call the answer element and get its value and store it into "answerValue" instead of replacing the answer element.
    const answerValue = answer.value;
    if (answerValue == answers[questionNumber]) {
        points += 10;
        console.log("correct");
    }
    else {
        console.log("incorrect" + " " + "the correct answer is " + answers[questionNumber]);
        if (points < 10) {
            points = 0;
        }
        else {
            points -= 10;
        }
    }
    //in the else I check if the user have more than 10 points and if so I decrement the points by 10 but id no then I set the points to 0
    questionNumber++;
    counter++;
    question.innerText = questions[questionNumber];
});

<div class="container">
    <span id="question"></span>
    <div class="input-group flex-nowrap">
      <input type="text" id="answer" class="form-control" placeholder="Answer Here..." aria-label="Username" aria-describedby="addon-wrapping">
    </div>
    <button type="button" id="submit" class="btn btn-outline-success">Submit</button>
  </div>

Answer 2

answer = document.getElementById("answer").value; 之后你必须将显示设置为无，或者你可以使用可见性来隐藏