Why is my H3 tag not updating with the Questions

var questionsArea = document.getElementById("main-question");
var questionArr = [];

questionArr[0] = {
  question: "What was my first Job?",
  choiceOne: "Moes",
  choiceOne: "Burger King",
  choiceOne: "Taco Bell",
  choiceOne: "Sonic",
  correctChoice: "Moes",
};

questionArr[1] = {
  question: "What is my wifes name?",
  choiceOne: "",
  choiceOne: "Burger King",
  choiceOne: "Taco Bell",
  choiceOne: "Sonic",
  correctChoice: "Moes",
};

questionArr[2] = {
  question: "What was my first Job?",
  choiceOne: "Moes",
  choiceOne: "Burger King",
  choiceOne: "Taco Bell",
  choiceOne: "Sonic",
  correctChoice: "Moes",
};

questionArr[3] = {
  question: "What was my first Job?",
  choiceOne: "Moes",
  choiceOne: "Burger King",
  choiceOne: "Taco Bell",
  choiceOne: "Sonic",
  correctChoice: "Moes",
};

questionArr[4] = {
  question: "What was my first Job?",
  choiceOne: "Moes",
  choiceOne: "Burger King",
  choiceOne: "Taco Bell",
  choiceOne: "Sonic",
  correctChoice: "Moes",
};

questionsArea.innerHTML(
  questionArr[Math.floor(Math.random() * questionArr.length)].question
);

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
  <!--<![endif]-->
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Quiz App</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>

  <body>
    <!--[if lt IE 7]>
      <p class="browsehappy">
        You are using an <strong>outdated</strong> browser. Please
        <a href="#">upgrade your browser</a> to improve your experience.
      </p>
    <![endif]-->

    <div class="header">
      <h1>Do you know Johnathan Mullen???</h1>
    </div>

    <div class="container">
      <h3 id="main-question"></h3>
      <input id="choice1" type="radio" name="choice" value="Yes" /> 1990
      <input id="choice2" type="radio" name="choice" value="Yes" /> 1990
      <input id="choice3" type="radio" name="choice" value="Yes" /> 1990
      <input id="choice4" type="radio" name="choice" value="Yes" /> 1990
      <button>Submit</button>
    </div>

    <script src="quiz.js" async defer></script>
  </body>
</html>

Hey there,

good to see you again. :wave:

I’ve edited your post for readability, because it was very hard to read.

You can use the “preformatted text” tool in the editor ( </> ) to add code.

Because you want to show us your whole project, please use a service like codepen and input a link to your project here, so that we can test it.

You’re using innerHTML as a function.
But innerHTML is a property of a HTML element.
This means you have to assign it instead of invoking it.

1 Like