Necesito hacer que las variables "responder" y "enviar" sean invisibles y traté de hacerlo en las líneas 21-22 en el archivo javascript pero no funciona, ¿cómo puedo hacerlas invisibles?
codigo javascript y 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>Las variables de selección de elementos deben establecerse como const porque los elementos no cambian, solo cambia su contenido. Esto evitaría errores como los que tenía en su código, que se indica en el siguiente párrafo.
En la función de escucha de eventos, cambié la variable de answer a answerValue porque no puede cambiar un conjunto const al elemento. Por lo tanto, debe almacenar esos datos con un nombre diferente. En su código, estaba tratando de llamar a la propiedad de estilo en un valor y no en el elemento. Esto se debe a que cambió la respuesta del elemento al valor en cada llamada de la función.
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>Después de answer = document.getElementById("answer").value; tiene que configurar la visualización en ninguno, o puede usar la visibilidad para ocultar