如何在 JavaScript 中将对象属性添加到数组中？

Question

这是一个小提琴。 http://fiddle.jshell.net/GF9nj/1/ 我想弄清楚的是为什么当我将我的对象数据 .push 到 randomAnswerArray 时，它甚至在测试

中也没有出现。它大约是 JavaScript 部分的一半。

这里是有问题的代码：

// 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();

valueOf() 调用仅显示 randomAnswerArray 中的 0 和 1 项，但我也推送 2 和 3。

---

这是小提琴的完整代码：

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

Answer 1

好吧，函数 generate 不存在，因为 JsFiddle 在 onLoad 事件中添加了 javascript 代码作为函数。这使得生成函数在不同的私有上下文中声明。 我建议添加js代码

window.generate = generate;

作为代码的最后一个。这样，您将在全局命名空间中设置生成函数。并且您的 onClick 事件会知道正确调用它。 如果您修复此问题，您的脚本将正常运行。

我还为你更新了你的小提琴：http://fiddle.jshell.net/GF9nj/9/

Answer 2

在您的推送语句中，您拼错了这些

 incorrectAnswer2
 incorrectAnswer3

作为

incorrectanswer2
incorrectanswer3

Answer 3

所以这就是问题所在。这是 JSFiddle 的事情。在 Framework 和 Extensions 选项下设置 no wrap in body。加载javascript的方式，您的函数在您认为的范围内不可见。如果您愿意，我可以在编辑中进一步解释

JSFiddle 默认将您的 JS 包装在文档的 onload 事件中。所以你的函数没有像你想象的那样定义在根范围内，而是在 document.onload 函数的范围内，你无法从正文中访问它，因为那是在该函数之外。我将 JsFiddle 属性 'wrap in' 更改为 'no wrap (body)' 并且它起作用了。

你真的不应该用 onclick 标签绑定你的函数。更好的解决方案是从按钮中删除 onclick，并将其替换为 id="button"

然后在 javascript 的底部，document.getElementById('start').onclick=generate