如何在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

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;
    }
}

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; } } 

Answer 1

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/

Answer 2

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

Answer 3

in your push statements you misspell these

 incorrectAnswer2
 incorrectAnswer3

as

incorrectanswer2
incorrectanswer3