CODEWITHSUNDEEP
javascriptrandom
user7621056
user7621056

Reputation:

Javascript: Random number generator won't produce random number

// 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>

I am trying to make a task list that stores all of the tasks inputted into an array where afterwards I'll display a random task on the webpage. But when I test it, it will only produce the last thing I inputted on the screen. Where am I making my error?

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

Upvotes: 0

Views: 76

Answers (1)

ibrahim mahrir
ibrahim mahrir

Reputation: 31682

That is because your array contain the same element (multiple of times). Your tasks array looks like this:

tasks = [
    elem,
    elem, // same element
    elem, // also the same
    ...
]

because you're pushing an object (task) and since objects are passed by reference, the items of the array are all references to the same DOM element, which is the input, thus, picking any item from the array and access its value property will return the current value of the input no matter what index you choose.

To solve the problem, push the value which is a string (basic type) that mean every time you push it, it will be passed by value and so the items of the array will be unique (unless you push the same value, you get the idea).

Try this:

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

Upvotes: 4

Related Questions