How do I add object properties into an array in JavaScript?

Question

Here's a fiddle. http://fiddle.jshell.net/GF9nj/1/ What I'm trying to figure out is why when I .push my object data into the randomAnswerArray it doesn't show up even in the testing <p>. It's about halfway down the JavaScript section.

Here is the code in question:

// incorrectAnswer1, incorrectAnswer2, incorrectAnswer3 are initialised elsewhere ...
randomAnswerArray = []; //resets the array to empty
randomAnswerArray.push(randomQuestion.correctAnswer);
document.getElementById('test3').innerHTML=randomAnswerArray[0]; //TESTING doesn't work
randomAnswerArray.push(randomQuestion.incorrectAnswer1);
randomAnswerArray.push(randomQuestion.incorrectanswer2);
randomAnswerArray.push(randomQuestion.incorrectanswer3);
document.getElementById('test1').innerHTML = randomAnswerArray.valueOf();

the valueOf() call displays only the 0 and 1 items from randomAnswerArray, but I'm pushing 2 & 3 as well.

Here is the full code of the fiddle:

HTML

<p id='questionString'></p>
<p id='test1'></p>
<p id='test2'></p>
<p id='test3'></p>
<button onclick='generate()'>Click me to start!</button>

JavaScript

var questionList = [];
var randomAnswerArray = [];

// this is the question object constructor

function quizQuestion(question, correctAnswer, incorrectAnswer1, incorrectAnswer2, incorrectAnswer3) {
    this.question = question;
    this.correctAnswer = correctAnswer;
    this.incorrectAnswer1 = incorrectAnswer1;
    this.incorrectAnswer2 = incorrectAnswer2;
    this.incorrectAnswer3 = incorrectAnswer3;
}

// this constructs a question

var hairColor = new quizQuestion("What color is my hair?", "black", "blue", "red", "purple");

// this adds the question to the questionList

questionList.push(hairColor);
document.getElementById('test2').innerHTML = questionList[0].correctAnswer; //TESTING object constructor works
function generate() {

    // this part picks a random question
    var randomQuestion = questionList[Math.floor(Math.random() * questionList.length)];

    // this part puts the question in the questionString
    document.getElementById("questionString").innerHTML = randomQuestion.question;

    // this part puts the answers in the array

    // THIS IS WHAT WE ARE TESTING    VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV
    randomAnswerArray = []; //resets the array to empty
    randomAnswerArray.push(randomQuestion.correctAnswer);
    document.getElementById('test3').innerHTML=randomAnswerArray[0]; //TESTING doesn't work
    randomAnswerArray.push(randomQuestion.incorrectAnswer1);
    randomAnswerArray.push(randomQuestion.incorrectanswer2);
    randomAnswerArray.push(randomQuestion.incorrectanswer3);
    document.getElementById('test1').innerHTML = randomAnswerArray.valueOf(); //TESTING doesn't work
    // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^    
    // this part randomizes the array

    var currentIndex = randomAnswerArray.length;
    var temporaryValue;
    var randomIndex;
    while (0 !== currentIndex) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;
        temporaryValue = randomAnswerArray[currentIndex];
        randomAnswerArray[currentIndex] = randomAnswerArray[randomIndex];
        randomAnswerArray[randomIndex] = temporaryValue;
    }
}

how is it not defined? I'm pretty sure that I set up the function correctly, right? — James
– James, Commented Jul 25, 2014 at 15:11
James* is right. To be able to test I need to add $('button').on('click', generate); — Luca Davanzo
– Luca Davanzo, Commented Jul 25, 2014 at 15:14
i have that in the html part just under the < p>'s it's set up according to w3schools.com/tags/ev_onclick.asp — James
– James, Commented Jul 25, 2014 at 15:16

indyone · Accepted Answer · 2014-07-25 15:25:46Z

2

Well, the function generate does not exist because JsFiddle adds the javascript code as function in the onLoad event. This make the generate function to be declared in a different private context. I suggest to add the js code

window.generate = generate;

as the last last of your code. This way you will set the generate function in the global namespace. and your onClick event will know call it properly. If you fix this, your script will run properly.

I also updated your fiddle for you: http://fiddle.jshell.net/GF9nj/9/

answered Jul 25, 2014 at 15:25

indyone

213 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James Over a year ago

fiddle.jshell.net/GF9nj/34 check out the undefined spaces and the incomplete third paragraph

djna · Accepted Answer · 2014-07-25 15:45:30Z

1

in your push statements you misspell these

 incorrectAnswer2
 incorrectAnswer3

as

incorrectanswer2
incorrectanswer3

answered Jul 25, 2014 at 15:45

djna

56.2k14 gold badges80 silver badges124 bronze badges

3 Comments

James Over a year ago

oh my god thank you so much this was driving me nuts. <3

James Over a year ago

as you can probably tell i'm new to this programming stuff but so far it seems like the big errors are always small stuff like this.

djna Over a year ago

Feel free to "accept" this answer ;-) And yes, an awful lot of big errors are these kind of glitches - sadly though, sometimes you get something much nastier :-)

mistahenry · Accepted Answer · 2014-07-25 15:33:30Z

1

So here's the issue. It's a JSFiddle thing. Set the no wrap in body under Framework and Extensions option. The way the javascript is being loaded, your function is not visible in the scope like you think it is. I can explain further in an edit if you'd like

JSFiddle wraps your JS in the document's onload event by default. So your function was not defined in the root scope as you thought, but in the scope of the document.onload function, and you couldn't reach it from within the body, because that is outside of that function. I changed the JsFiddle attribute 'wrap in' to 'no wrap (body)' and it worked.

You really shouldn't bind your functions with the onclick tag. A better solution would be to remove the onclick from the button, and replace it with an id="button"

Then at the bottom of your javascript, document.getElementById('start').onclick=generate

edited Jul 25, 2014 at 15:33

answered Jul 25, 2014 at 15:21

mistahenry

8,7343 gold badges29 silver badges40 bronze badges

3 Comments

Luca Davanzo Over a year ago

I suspected such behavior (:

James Over a year ago

I fixed what you said and here's what I have fiddle.jshell.net/GF9nj/14 the problem now is that my [2][3] are undefined but my [0][1] seem to be fine.

mistahenry Over a year ago

randomAnswerArray = []; //resets the array to empty randomAnswerArray.push(randomQuestion.correctAnswer); document.getElementById('test1').innerHTML=randomAnswerArray[2]; How in the world can randomAnswerArray[2] have a value if you set it to an empty array and then only push one element? only randomAnswerArray[0] has an element at this point. you need to populate the array before you set the values in your test tags

Collectives™ on Stack Overflow

How do I add object properties into an array in JavaScript?

3 Answers 3

1 Comment

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related