Click here to Skip to main content
15,942,368 members
Please Sign up or sign in to vote.
3.00/5 (1 vote)
See more:
I am trying to make a to-do list form. I want each task to show up at the bottom not just one. How do I do this? Here is my js

C#
function Task(name, priority) {
    'use strict';
    this.name = name;
    this.priority = priority;
    this.completed = false;
    this.toString = function() {
        return this.name + ' (' + this.priority + ')';
            };
} // End of Task function.
window.onload = function(){
    'use strict';
    var task = document.getElementById('task');
    var priority = document.getElementById('priority');
    var output = document.getElementById('output');
    var tasks = [];
    document.getElementById('theForm').onsubmit = function() {
        var t = new Task(task.value, priority.value);
        tasks.push(t);
        output.innerHTML = 'There are now <b>' + tasks.length + '</b> item(s) in the to-do list. Just added:<br>' + t.toString();
            return false;
            function expSub() {
                expandSubtitle('output.innerHTML')
            }
    }; // End of onsubmit anonymous function.
}; // End of onload anonymous function.


Any suggestions would be helpful! Thanks!
Posted
Comments
Sergey Alexandrovich Kryukov 15-Oct-13 16:44pm    
It's not clear where the task data comes from and how the results should look. Remember though that all id values should be unique on the page. So what, do you have only one of each elements with id "task", "priority", "output" and "theForm"?
—SA
Member 10338301 21-Oct-13 9:56am    
Im sorry I am very new at this. I have a form now that works good. What I wat it to do is instead of listing just the updated task on the to-do form I would like all of the tasks to show up. Here Is My Html and javascript.

<!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>Enter an Item To Be Done
<div><label for="task">Task</label><input type="text" name="task" id="task" required></div>
<div><label for="priority">Priority</label> <select name="priority" id="priority">
<option value="high">High</option>
<option value="normal" selected>Normal</option>
<option value="low">Low</option>
</select></div>
<input type="submit" value="Add It!" id="submit">
<div id="output"></div>
</fieldset>
</form>
<script src="js/tasks.js"></script>
</body>
</html>


function Task(name, priority) {
'use strict';
this.name = name;
this.priority = priority;
this.completed = false;
this.toString = function() {
return this.name + ' (' + this.priority + ')';
};
}
window.onload = function(){
'use strict';
var task = document.getElementById('task');
var priority = document.getElementById('priority');
var output = document.getElementById('output');
var tasks = [];
document.getElementById('theForm').onsubmit = function() {
var t = new Task(task.value, priority.value);
tasks.push(t);
output.innerHTML = 'There are now ' + tasks.length + ' item(s) in the to-do list. Just added:<br>' + t.toString();
return false;
function expSub() {
expandSubtitle('output.innerHTML')

} } // End of onsubmit anonymous function.
}; // End of onload anonymous function.

Thank you!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900