// Need a global variable:
var tasks = [];
// Function called when the form is submitted.
// Function adds a task to the global array.
function addTask() {
'use strict';
// Get the task:
var task = document.getElementById('task');
// Reference to where the output goes:
var output = document.getElementById('output');
// For the output:
var message = '';
if (task.value) {
// Add the item to the array:
tasks[tasks.length] = task;
//Generate a random task
var randomTask = tasks[Math.floor(Math.random()*tasks.length)].value;
// Update the page:
message = 'You have ' + tasks.length + ' task(s) in your to-do list.' + ' ' + randomTask;
if (output.textContent !== undefined) {
output.textContent = message;
} else {
output.innerText = message;
}
} // End of task.value IF.
// Return false to prevent submission:
return false;
} // End of addTask() function.
// Initial setup:
function init() {
'use strict';
document.getElementById('theForm').onsubmit = addTask;
} // End of init() function.
window.onload = init;

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>To-Do List</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/form.css">
</head>
<body>
<!-- tasks.html -->
<form action="#" method="post" id="theForm">
<fieldset><legend>Enter an Item To Be Done</legend>
<div><label for="task">Task</label><input type="text" name="task" id="task" required></div>
<input type="submit" value="Add It!" id="submit">
<div id="output"></div>
</fieldset>
</form>
<script src="js/tasks.js"></script>
</body>
</html>
&#13;
我正在尝试制作一个任务列表,用于存储输入到数组中的所有任务,之后我会在网页上显示随机任务。但是当我测试它时,它只会产生我在屏幕上输入的最后一件事。我在哪里犯错误?
// Need a global variable:
var tasks = [];
// Function called when the form is submitted.
// Function adds a task to the global array.
function addTask() {
'use strict';
// Get the task:
var task = document.getElementById('task');
// Reference to where the output goes:
var output = document.getElementById('output');
// For the output:
var message = '';
if (task.value) {
// Add the item to the array:
tasks[tasks.length] = task;
//Generate a random task
var randomTask = tasks[Math.floor(Math.random()*tasks.length)].value;
// Update the page:
message = 'You have ' + tasks.length + ' task(s) in your to-do list.' + ' ' + randomTask;
if (output.textContent !== undefined) {
output.textContent = message;
} else {
output.innerText = message;
}
} // End of task.value IF.
// Return false to prevent submission:
return false;
} // End of addTask() function.
// Initial setup:
function init() {
'use strict';
document.getElementById('theForm').onsubmit = addTask;
} // End of init() function.
window.onload = init;
答案 0 :(得分:4)
这是因为你的数组包含相同的元素(多次)。您的tasks
数组如下所示:
tasks = [
elem,
elem, // same element
elem, // also the same
...
]
因为你正在推送一个对象(task
)并且由于对象是通过引用传递的,所以数组的所有项都是对相同DOM元素的引用,这是输入,因此,从中挑选任何项目无论你选择什么索引,数组和访问它的value
属性都将返回输入的当前值。
要解决这个问题,请按每次推送它的字符串(基本类型)推送它,它将按值传递,因此数组的项目将是唯一的(除非您按下相同的值,你明白了。)
试试这个:
tasks.push(task.value); // push is clearer, push the value instead of the object itself
//Generate a random task
var randomTask = tasks[Math.floor(Math.random()*tasks.length)]; // no need to use .value as the items of the array are all values