Questions and timer will not render to quiz page. Any help would be great-CodePudding

So I am creating a quiz generator and I have the Base HTML down and the java script logic but when I load the quiz up through my browser and press begin quiz nothing happens, iv been going over the code for hours trying different solutions and cant seem to find out why it isn't working. It looks like its a JavaScript error not HTML any help would be very much appreciated.

var questions = [
    {
        title: "commonly used data types DO NOT include?",
        choices: ["strings", "booleans", "alerts", "numbers"],
        answer: "alerts"
    },
    {
        title: "Arrays in javascript can be used to store what?",
        choices: ["numbers and strings", "other arrays", "booleans", "all of the above"],
        answer: "all of the above"

    },
    {
        title: "A very useful tool used during development and debugging for printing content to debugger is? ",
        choices: ["javascript", "terminal/bash", "for loops", "console log"],
        answer: "console log"
    },
    {
        title: "The condition in an if/else statement is enclosed within?",
        choices: ["quotes", "curly brackets", "paraentheses", "square brackets"],
        answer: "curly brackets"
    },
    {
        title: "string values must be enclosed within____ when being assigned to variables",
        choices: ["commas", "curley brackets", "quotes", "perentheses"],
        answer: "commas"
    }
 ];

 var welcomeScreen = document.getElementById("welcomeScreen");
 var highScoresBoard =document.getElementById("highScoreSection");
 var submit = document.getElementById("submit");
 var questionTitle = document.getElementById("question");
 questionScreen.style.display = "none";
 var answersListParent = document.getElementById("answers");
 var timerDisplay = document.getElementById("timer");
 var beginQuizBtn = document.getElementById("beginQuizBtn");
 var questionScreen = document.getElementById("QuestionScreen");



 var questionAskedIndex = 0;
 var time= 60;
 var quizTimer;

 function startQuiz(){
    welcomeScreen.style.display = "none";
    questionScreen.style.display ="block";
    startQuizTimer();
    timerDisplay.textContent = time;
    startQuestions();
 }

 function startQuizTimer(){
    quizTimer = setInterval(function(){
        time--;
        timerDisplay.textContent= time;
      if(time < 0){
        time = 0;
        endQuiz();
      }
        
        
    }, 1000)
 }

 function startQuestions() {
    var currentQuestion = questions[questionAskedIndex].title;
    questionTitle.textContent = currentQuestion;
    answersListParent.innerHTML = "";
    var currentQuestionAnswers = questions[questionAskedIndex].choices;
    currentQuestionAnswers.forEach(function (answer) {
        var answerButton = document.createElement("button");
        answerButton.setAttribute("value", answer)
        answerButton.textContent = answer;
        answerButton.onclick = checkAnswerSelected

        answersListParent.appendChild(answerButton);
    })
 }

 function checkAnswerSelected() {
    var answerSelected = this.value;
    if (answerSelected === questions[questionAskedIndex].answer) {
        alert("correct")
    } else{
     alert("wrong")
     time -=10;
     if (time <= 0){
        endQuiz();
     }
        timerDisplay.textContent = time;
    }
    questionAskedIndex  ;
    console.log(questionAskedIndex)
    if (questionAskedIndex === questions.length){
        endQuiz();
    }
    startQuestions();
    }

    beginQuizBtn.onclick = startQuiz;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Code Quiz!!!</title>
</head>
<body>
    <div id = "welcomeScreen" class = "welcomeScreen">
        <h1>Super Fun Coding Quiz</h1>

        <button id="beginQuizBtn" >Begin Quiz</button>
       

    </div>
    <div id="questionScreen" >
        <h1 id ="timer"></h1>
        <p>
            Answer the Codeing Themed questions in the time limit given to win.
            Caution! Wrong answers given will remove 10 seconds from your timer.
            Have fun, and goodluck!!!
        </p>
        <h2 id="question" ></h2>
        <ol id="answers" ></ol>
    </div>
    <div id="highScore">
        <h3>Well Done!!</h3>
        <h4>Add your name to the honor board</h4>
        <h5 id="scoreDisplay"></h5>
        <input type="text" id="yourName"/>
        <button id="submit">Submit</button>
    </div>
    <script src="script.js"></script>
    
</body>
</html>

CodePudding user response：

You have to hide the control after finding it

var questionScreen = document.getElementById("QuestionScreen");
 questionScreen.style.display = "none";

Typo Error : Element ID differs from the id in the html(questionScreen) <> Js(QuestionScreen)

And endquiz() function missing in the given snippet ., with that you are good to go...

var questions = [
    {
        title: "commonly used data types DO NOT include?",
        choices: ["strings", "booleans", "alerts", "numbers"],
        answer: "alerts"
    },
    {
        title: "Arrays in javascript can be used to store what?",
        choices: ["numbers and strings", "other arrays", "booleans", "all of the above"],
        answer: "all of the above"

    },
    {
        title: "A very useful tool used during development and debugging for printing content to debugger is? ",
        choices: ["javascript", "terminal/bash", "for loops", "console log"],
        answer: "console log"
    },
    {
        title: "The condition in an if/else statement is enclosed within?",
        choices: ["quotes", "curly brackets", "paraentheses", "square brackets"],
        answer: "curly brackets"
    },
    {
        title: "string values must be enclosed within____ when being assigned to variables",
        choices: ["commas", "curley brackets", "quotes", "perentheses"],
        answer: "commas"
    }
 ];

 var welcomeScreen = document.getElementById("welcomeScreen");
 var highScoresBoard =document.getElementById("highScoreSection");
 var submit = document.getElementById("submit");
 var questionTitle = document.getElementById("question");

 var answersListParent = document.getElementById("answers");
 var timerDisplay = document.getElementById("timer");
 var beginQuizBtn = document.getElementById("beginQuizBtn");
 var questionScreen = document.getElementById("QuestionScreen");
 questionScreen.style.display = "none";


 var questionAskedIndex = 0;
 var time= 60;
 var quizTimer;

 function startQuiz(){
    welcomeScreen.style.display = "none";
    questionScreen.style.display ="block";
    startQuizTimer();
    timerDisplay.textContent = time;
    startQuestions();
 }

 function startQuizTimer(){
    quizTimer = setInterval(function(){
        time--;
        timerDisplay.textContent= time;
      if(time < 0){
        time = 0;
        endQuiz();
      }
        
        
    }, 1000)
 }

 function startQuestions() {
    var currentQuestion = questions[questionAskedIndex].title;
    questionTitle.textContent = currentQuestion;
    answersListParent.innerHTML = "";
    var currentQuestionAnswers = questions[questionAskedIndex].choices;
    currentQuestionAnswers.forEach(function (answer) {
        var answerButton = document.createElement("button");
        answerButton.setAttribute("value", answer)
        answerButton.textContent = answer;
        answerButton.onclick = checkAnswerSelected

        answersListParent.appendChild(answerButton);
    })
 }

 function checkAnswerSelected() {
    var answerSelected = this.value;
    if (answerSelected === questions[questionAskedIndex].answer) {
        alert("correct")
    } else{
     alert("wrong")
     time -=10;
     if (time <= 0){
        endQuiz();
     }
        timerDisplay.textContent = time;
    }
    questionAskedIndex  ;
    console.log(questionAskedIndex)
    if (questionAskedIndex === questions.length){
        endQuiz();
    }
    startQuestions();
    }

    beginQuizBtn.onclick = startQuiz;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Code Quiz!!!</title>
</head>
<body>
    <div id = "welcomeScreen" class = "welcomeScreen">
        <h1>Super Fun Coding Quiz</h1>

        <button id="beginQuizBtn" >Begin Quiz</button>
       

    </div>
    <div id="QuestionScreen" >
        <h1 id ="timer"></h1>
        <p>
            Answer the Codeing Themed questions in the time limit given to win.
            Caution! Wrong answers given will remove 10 seconds from your timer.
            Have fun, and goodluck!!!
        </p>
        <h2 id="question" ></h2>
        <ol id="answers" ></ol>
    </div>
    <div id="highScore">
        <h3>Well Done!!</h3>
        <h4>Add your name to the honor board</h4>
        <h5 id="scoreDisplay"></h5>
        <input type="text" id="yourName"/>
        <button id="submit">Submit</button>
    </div>
    <script src="script.js"></script>
    
</body>
</html>