Develop Reference

Values from Array Only Change Upon First Run of a Function

I'm a beginner working on a trivia app, and I'm having a heck of a time getting the questions to iterate properly. I've tried things multiple different ways. Here is my current configuration.
The questions are iterated by the pullQuestions() function. This function pulls from an array called question.
The pullQuestions() function is run when the startbutton is clicked and when the submitA button is clicked. These buttons run either startGame() or submitA() respectively.
Please note, I have not yet implemented score tracking so the expectation of the submit button is currently limited to pulling the next question.
Question HTML
<div id="gameArea" class="questionbox" style="display: none;">
<div class="questionarea">
<h2 id="headerQ">Question Number</h2>
<p id="content">Question Text</p>
</div>
<div class="answerarea">
<!-- This can be ignored. This is where my options are but I'm not using them in my code yet -->
</div>
<button id="submitA" class="submitA" onClick="submitA()">Submit</button>
</div>
startGame() JavaScript (This works as expected)
function startGame(){
document.getElementById("startArea").style.display = "none";
document.getElementById("gameArea").style.display = "block";
question.id = 0;
pullQuestions();
console.log("startgame() Executed", question.id);
console.log(question[0], question[1]);
}
Question Array* (Set as a Global Variable)
function select1() {
if (op1.className == "selectionFalse") {
document.getElementById("op1").className = "selectionTrue";
document.getElementById("op2").className = "selectionFalse";
document.getElementById("op3").className = "selectionFalse";
document.getElementById("op4").className = "selectionFalse";
console.log("selected1()", "If Condition", op1.className);
}
else {
document.getElementById("op1").className = "selectionFalse";
}
}
submitA() JavaScript (Does not iterate through the Array but does increase the id attribute)
function submitA() {
question.id++;
console.log("submitA() Run)", "Question ID: ", question.id, headerQ, content);
}
*pullQuestions() JavaScript (This is run when the two above functions are run, but I only see results when it runs as part of the startGame() function.
function pullQuestions() {
if (question.id == 0) {
document.getElementById("headerQ").innerHTML = question[0].headerQ;
document.getElementById("content").innerHTML = question[0].content;
console.log("pullQuestions() Executed");
console.log("Variables: ", "headerQ = ", headerQ, "content = ", content);
}
if (question.id == 1) {
document.getElementById("headerQ").innerHTML = question[1].headerQ;
document.getElementById("content").innerHTML = question[1].content;
console.log("pullQuestions() Executed");
console.log("Variables: ", "headerQ = ", headerQ, "content = ", content);
}
if (question.id == 2) {
document.getElementById("headerQ").innerHTML = question[2].headerQ;
document.getElementById("content").innerHTML = question[2].content;
console.log("pullQuestions() Executed");
console.log("Variables: ", "headerQ = ", headerQ, "content = ", content);
}
}
I feel like I'm missing something small, but being that I'm new it's possible I'm approaching this all wrong. Any advice or direction is appreciated.

It doesn't work for you in the submitA button because you forgot to activate the call to in it pullQuestions
On the other hand, in startGame you did activate pullQuestions after you changed the id, so it works for you
This is what the function should look like
function submitA() {
question.id++;
pullQuestions();
console.log("submitA() Run)", "Question ID: ", question.id, headerQ, content);
}

I was able to get this to work. I added a variable to determine that the selection is "true." I also added a button to move to the next question so that the submit button / function is separate.

Bringing Correct Message after correct answer

I am trying to create a message that shows "Correct" after user select a correct answer from options but I dont know why my code is not doing that. I have added the full code. After so many changes, I dont know why it is still not going through. The question and answer are in array of objects.
<script>
var questions = [{"category":"Science: Computers","type":"multiple","difficulty":"easy","question":"What does CPU stand for?","correct_answer":"Central Processing Unit","answers":["Central Process Unit","Computer Personal Unit", "Central Processing Unit", "Central Processor Unit"]},
{"category":"Science: Computers","type":"multiple","difficulty":"easy","question":"In the programming language Java, which of these keywords would you put on a variable to make sure it doesn't get modified?","correct_answer":"Final","answers":["Static", "Final", "Private","Public"]},
{"category":"Science: Computers","type":"boolean","difficulty":"easy","question":"The logo for Snapchat is a Bell.","correct_answer":"False","answers":["True", "False"]},
{"category":"Science: Computers","type":"boolean","difficulty":"easy","question":"Pointers were not used in the original C programming language; they were added later on in C++.","correct_answer":"False","answers":["True", "False"]},
{"category":"Science: Computers","type":"multiple","difficulty":"easy","question":"What is the most preferred image format used for logos in the Wikimedia database?","correct_answer":".svg","answers":[".svg", ".png",".jpeg",".gif"]},
{"category":"Science: Computers","type":"multiple","difficulty":"easy","question":"In web design, what does CSS stand for?","correct_answer":"Cascading Style Sheet","answers":["Counter Strike: Source","Corrective Style Sheet","Computer Style Sheet", "Cascading Style Sheet"]},
{"category":"Science: Computers","type":"multiple","difficulty":"easy","question":"What is the code name for the mobile operating system Android 7.0?","correct_answer":"Nougat","answers":["Ice Cream Sandwich", "Nougat", "Jelly Bean","Marshmallow"]},
{"category":"Science: Computers","type":"multiple","difficulty":"easy","question":"On Twitter, what is the character limit for a Tweet?","correct_answer":"140","answers":["120","160","100", "140"]},
{"category":"Science: Computers","type":"boolean","difficulty":"easy","question":"Linux was first created as an alternative to Windows XP.","correct_answer":"False","answers":["True", "False"]},
{"category":"Science: Computers","type":"multiple","difficulty":"easy","question":"Which programming language shares its name with an island in Indonesia?","answer":"Java","incorrect_answers":["Python","C","Jakarta", "Java"]}];
window.onload =function(){
var questionIndex = -1; // Not started
function submitAnswer() {
//document.body.innerHTML = '';
++questionIndex;
document.write(questions[questionIndex].question + "<br />");
for (var j=0; j < questions[questionIndex].answers.length; j++) {
document.write("<input type=radio id=myRadio name=radAnswer>" + questions[questionIndex].answers[j] + "<br />");
}
if (questionIndex < (questions.length - 1)) {
var nextButton = document.createElement("input");
nextButton.type = "button";
nextButton.value = "Submit Answer";
nextButton.addEventListener('click', submitAnswer);
document.body.appendChild(nextButton);
}
var userAnswer,
element = document.querySelector("#myRadio:checked");
if (element !== null) {
userAnswer = element.value;
} else {
userAnswer = null;
return "Select Answer"
}
if (userAnswer == questions[questionIndex].correct_answers) {
var message,
element = document.querySelector("#results");
if (element !== null) {
message = "Correct";
} else {
message = null;
return "Select Answer";
}
}
};
submitAnswer();

Everything is fine until this line:
document.body.appendChild(message);
You are trying to append a String value,but it's expecting a Node Object (i.e. parameter 1 is not of type 'Node'). Hence your code is not working properly.

Javascript Switch Statement with more than one default

I'm a beginner at JavaScript. I'm sorry if I cannot explain clearly what I need.
I am trying to design a page with some questions. The answers must be typed in a textbox.
I am using a Switch Statement to generate different comments to all acceptable answers.
As for answers that are not accepted, I would like to have more than the default message.
For example, if the user types an unaccepted answer for the first time, a message will show up, like "That is not an acceptable answer". On the user's second unaccepted answer a different message would show up, like "Please try again"... And so on for about five times, and then it would loop back to the first default message.
I just don't know how to make that happen...
This is what I have so far:
function myFunction() {
var text;
var colors = document.getElementById("myInput").value;
switch (colors) {
case "White":
text = "White is a nice color.";
break;
case "Blue":
text = "I also like blue. It reminds me of the ocean.";
break;
case "Red":
text = "Red is also nice.";
break;
default:
text = "That is not an acceptable answer";
}
document.getElementById("comment").innerHTML = text;
}
<p>What is your favorite color from the USA flag?</p>
<input id="myInput" type="text">
<button onclick="myFunction()">Answer</button>
<p id="comment"></p>

You need to have an array for the number of messages, the user needs to get when they have sent an answer.
var count = 0;
var messages = ["That is not an acceptable answer.", "Please try again!", "Still wrong.", "I don't understand.", "Consider visiting the 'help page' before moving on."];
Based on that count, show the message in the default case.
default:
text = messages[count%messages.length];
count++;
Full Working Snippet
var count = 0;
var messages = ["That is not an acceptable answer.", "Please try again!", "Still wrong.", "I don't understand.", "Consider visiting the 'help page' before moving on."];
function myFunction() {
var text;
var colors = document.getElementById("myInput").value;
switch (colors) {
case "White":
text = "White is a nice color.";
break;
case "Blue":
text = "I also like blue. It reminds me of the ocean.";
break;
case "Red":
text = "Red is also nice.";
break;
default:
text = messages[count%messages.length];
count++;
}
document.getElementById("comment").innerHTML = text;
}
<p>What is your favorite color from the USA flag?</p>
<input id="myInput" type="text">
<button onclick="myFunction()">Answer</button>
<p id="comment"></p>

var counter = 0;
function myFunction() {
var text;
var colors = document.getElementById("myInput").value;
switch(colors) {
case "White":
text = "White is a nice color.";
break;
case "Blue":
text = "I also like blue. It reminds me of the ocean.";
break;
case "Red":
text = "Red is also nice.";
break;
default:
text = getText(counter++);
}
counter = counter > 5 ? 0 : counter;
document.getElementById("comment").innerHTML = text;
}
function getText(counter) {
switch(counter):
case 1:
return "some text";
case 2:
return "some text";
...
}

How to change if statement from alert to text

How would I instead of have the if statement come up as an alert, have it appear as text on my page. Thanks
document.getElementById("button").onclick=function() {
if (document.getElementById("ask").value=="how tall are the pyramids") {
alert ("146.5 meters");
} else if (document.getElementById("ask").value == "how tall is the gateway arch") {
alert("630 feet");
} else if (document.getElementById("ask").value == "how tall is the empire state building") {
alert("6900 feet");

I may have misunderstood, but it sounds like you want to display the value in an html element rather than alerting the value. See the below example
document.getElementById("button").onclick = function() {
var val = document.getElementById("ask").value;
var answer = "I don't know!";
if (val == "how tall are the pyramids")
answer = "146.5 meters";
else if (val == "how tall is the gateway arch")
answer = "630 feet";
else if (val == "how tall is the empire state building")
answer = "6900 feet";
document.getElementById("answer").innerHTML = answer;
}
And in the html, add an answer element like so
<p id="answer"></p>
See CodePen

You want to add another element to your page that can display the results.
In the demo below I have added a span element and set the id attribute to answer.
document.getElementById("button").onclick=function(){
var Q = document.getElementById("ask").value;
var A = document.getElementById("answer");
var Result = "Ask another?";
if (Q=="how tall are the pyramids"){
Result="146.5 meters";
}else if(Q=="how tall is the gateway arch"){
Result="630 feet";
}else if(Q == "how tall is the empire state building"){
Result="6900 feet";
}
A.innerHTML = Result;
}
<span id="answer"></span><br/>
<input type="text" id="ask" />
<button type="button" id="button">Ask</button>
If you don't understand any of the above source code, please leave a comment below.
I hope this helps. Happy coding!

change
document.getElementById("ask").value
to
document.getElementById("ask").innerHTML
or
document.getElementById("ask").innerText

Trying to pass different variables through onclick function () brackets

I am trying to pass a few different cases through a function
<div id="button1" class="button" onclick="pop(case1)">popup a</div>
and then i want to create different cases in my function
function pop(a){
if (a='case1') {var mytext = "you pressed the popup case1"; var myclass=a;}
else if (a='case2'){var mytext = "you pressed the popup case2"; var myclass=a;}
else if (a='case3'){var mytext = "you pressed the popup case3"; var myclass=a;}
var p1 = document.createElement("div");
p1.classname =myclass;
p1.innerHTML=mytext;
document.body.appendChild(p1);
}
here is a fiddle i made for it
http://jsfiddle.net/alexnode/WqsNJ/1/
How should i create the conditional if else properly? Currently i get always case1 popup.

The problem is you are assigning with = rather than checking with ==, change your ='s to =='s.
http://jsfiddle.net/WqsNJ/2/
if (a=='case1') {var mytext = "you pressed the popup case1"; var myclass=a;}
else if (a=='case2'){var mytext = "you pressed the popup case2"; var myclass=a;}
else if (a=='case3'){var mytext = "you pressed the popup case3"; var myclass=a;}

In order to compare strings in JavaScript, you need to use the is equal to operator (==) instead of the equals sign (=).
So the correct code should be
function pop(a){
if (a=='case1') {var mytext = "you pressed the popup case1"; var myclass=a;}
else if (a=='case2'){var mytext = "you pressed the popup case2"; var myclass=a;}
else if (a=='case3'){var mytext = "you pressed the popup case3"; var myclass=a;}
var p1 = document.createElement("div");
p1.classname =myclass;
p1.innerHTML=mytext;
document.body.appendChild(p1);
}