change Dom elements to be invisible-CodePudding

I need to make the variables "answer" and "submit" invisible and I tried to do that on lines 21-22 in the javascript file but it doesn't work how can I make them invisible ?

javascript and html code:

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 >
    <span id="question"></span>
    <div >
      <input type="text" id="answer"  placeholder="Answer Here..." aria-label="Username" aria-describedby="addon-wrapping">
    </div>
    <button type="button" id="submit" >Submit</button>
  </div>

CodePudding user response：

After answer = document.getElementById("answer").value; you have to set the display to none, or you can use visibility to hidden

CodePudding user response：

The element selection variables should be set as const because the elements don't change only their content does. This would prevent mistakes as you had in your code, which is stated in the next paragraph.

In event listener function I changed the answer variable to answerValue because you cant change a const set to the element. So you need to store that data into a different name. In your code you were trying to call the style property on a value and not the element. This is because you changed the answer from the element to the value on each call of the function.

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 >
    <span id="question"></span>
    <div >
      <input type="text" id="answer"  placeholder="Answer Here..." aria-label="Username" aria-describedby="addon-wrapping">
    </div>
    <button type="button" id="submit" >Submit</button>
  </div>