Change html text with JavaScript

I am attempting to change the value of table element id="questionLoc" to a question I have placed in an array. HTML below...

    <link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<title>Game of Thrones Trivia Quiz</title>
</head>
<body>
<header>
    <h1>Game of Thrones Trivia Quiz</h1>
</header>
<form action="" name="mainForm">
    <p>Please choose the correct answer for the question given. Do so promptly - winter is coming.</p>
    <table>
        <tr>
            <td id="questionLoc">
            Question Location
            </td>
        </tr>

Javascipt document...

alert("hi");

var allQuestions = [];

function question(question, choices, answer) {
                this.question = question;
                this.choices = choices;
                this.answer = answer;
}

var question1 = new question("Who is Sansa\'s mother?", ["Cercei", "Marjorie", "Catelin", "Lysa"], 2);
var question2 = new question("Who is Geoffrey\'s mother?", ["Cercei", "Marjorie", "Catelin", "Lysa"], 0);
var question3 = new question("Who is Robert\'s mother?", ["Cercei", "Marjorie", "Catelin", "Lysa"], 3);

allQuestions.push(question1, question2, question3);

$(document).ready(function () {
   $('#button').click(function {
        $('R1').html("Response 1")
    });

});

var qLoc = document.getElementById("questionLoc").innerHTML;
qLoc = allQuestions[0].question;

The alert("hi") is a test and only appears when I comment out my jQuery. The "questionLoc" text does not change despite the 'getDocumentByID' line. Any thoughts on why the code does not execute would be appreciated! Thank you.


ANSWERS:


You should check the console when you develop JavaScript. If you look at it, you'll see there is a syntax error in this line:

$('#button').click(function {

There are missing parentheses after the keyword function. That is why the alert does not work -- your script does not parse because of this error.

To put the first question on the page, stick to jQuery notation, and don't revert back to the native getElementById:

$("#questionLoc").text(allQuestions[0].question);

Note that is better to use the text() method over html() when you are putting plain text. html() should be used when you are inserting HTML tagged content.


var qLoc = document.getElementById("questionLoc").innerHTML; qLoc = allQuestions[0].question;

Should be changed as

var qLoc = document.getElementById("questionLoc"); qLoc.innerHTML = allQuestions[0].question;

In the first case u store the actual string that you want to change in var qLoc. The thing you want to store is the element itself.


The biggest issue is that you want to save the question element, and then set its innerHtml attribute. Same with any answer element. Of course, as I made the answers in my demo option elements, you have to set their text attribute instead.

Edited, as I realized that jQuery was a tag in this. Now using that for editing HTML elements, and for iterating over answer elements.

var allQuestions = [];

function question(question, choices, answer) {
  this.question = question;
  this.choices = choices;
  this.answer = answer;
};

var question1 = new question("Who is Sansa\'s mother?", ["Cercei", "Marjorie", "Catelin", "Lysa"], 2);
var question2 = new question("Who is Geoffrey\'s mother?", ["Cercei", "Marjorie", "Catelin", "Lysa"], 0);
var question3 = new question("Who is Robert\'s mother?", ["Cercei", "Marjorie", "Catelin", "Lysa"], 3);

allQuestions.push(question1, question2, question3);

$(document).ready(function() {
  var questionEl = $(".questionEl");
  var answerEl = $(".answerEl");
  var buttonEl = $("#beginTest");
  var selectEl = $("<select>");
  var optionEl = $("<option>");
  var questionIndex = 0;
  buttonEl.on("click", function() {
    nextQuestion();
  });

  function nextQuestion() {
    questionEl.html(allQuestions[questionIndex].question);
    var thisAnswerEl = selectEl.clone();
    answerEl.html(thisAnswerEl);
    $.each(allQuestions[questionIndex].choices, function() {
      var thisOptionEl = optionEl.clone();
      thisOptionEl.attr("value", this).text(this);
      thisAnswerEl.append(thisOptionEl);
    })
    buttonEl.attr("value", "Next Question");
    questionIndex++;

  }

});
#questionEl {
  background-color: #999;
}
<script src=""></script>
<header>
  <h1>Game of Thrones Trivia Quiz</h1>
</header>
<form action="" name="mainForm">
  <p>Please choose the correct answer for the question given. Do so promptly - winter is coming.</p>
  <div class="questionEl">
  </div>
  <div class="answerEl">

  </div>
  <div class="button-container">
    <input id="beginTest" type="button" value="Begin!" />
  </div>


 MORE:


 ? jQuery DOM changes disappear after SharePoint list is sorted/filtered
 ? Loop through canvas image to find the biggest spot of (almost) solid color
 ? CanvasJs chart don't fit its container until browser resize
 ? Printing multiple pages with canvas functions LineTo and Textout
 ? javascript joystick for a camera
 ? CSS transitions not working after removing class
 ? How to find a user selection weather forward or backward in javascript?
 ? Auto expand a textarea using jQuery
 ? How to sort a dictionary by key, if key is a list (in C#)?
 ? sorting list of values in java after converting string to integer