Question

＆＃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;

＆＃13;

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

Answer 1

这是因为你的数组包含相同的元素（多次）。您的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

Javascript：随机数生成器不会产生随机数

1 个答案: