[英]How do I add object properties into an array in JavaScript?
这是一个小提琴。 http://fiddle.jshell.net/GF9nj/1/我要弄清楚的是为什么当我将对象数据推入randomAnswerArray时,即使在测试<p>中也没有显示。 它大约在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
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; } }
嗯,函数生成不存在,因为JsFiddle在onLoad事件中将javascript代码添加为函数。 这使得generate函数可以在其他私有上下文中声明。 我建议添加js代码
window.generate = generate;
作为代码的最后一个。 这样,您将在全局名称空间中设置generate函数。 并且您的onClick事件将正确调用它。 如果解决此问题,脚本将正常运行。
我也为您更新了小提琴: http : //fiddle.jshell.net/GF9nj/9/
这就是问题所在。 这是JSFiddle的事情。 在Framework and 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
在您的推送语句中,您拼错了这些
incorrectAnswer2
incorrectAnswer3
如
incorrectanswer2
incorrectanswer3
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.