capturetheflag
asked on
Remove an Item From an Array with JavaScript splice/indexOf
Hello,
I am trying to add another button that will remove tasks from the list, and allow the user to remove any of them. I am trying to use splice with indexOf but it's not working so far. Here is the java script and html code. Thanks for the help.
I am trying to add another button that will remove tasks from the list, and allow the user to remove any of them. I am trying to use splice with indexOf but it's not working so far. Here is the java script and html code. Thanks for the help.
<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">
<input type="submit" value="Delete It!" id="delete">
<div id="output"></div>
</fieldset>
</form>
<script src="js/tasks2.js"></script>
</body>
</html>// tasks.js #2
// This script manages a to-do list.
// 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.push(task.value);
// Update the page:
message = '<h2>To-Do</h2><ol>';
for (var i = 0, count = tasks.length; i < count; i++) {
message += '<li>' + tasks[i] + '</li>';
}
message += '</ol>';
output.innerHTML = message;
} // End of task.value IF.
// Return false to prevent submission:
return false;
} // End of addTask() function.
function deleteTask() {
var inputTask = document.getElementById('task');
var taskLength = inputTask.length;
var i = array.indexOf("inputTask");
if (i != -1) {
array.splice(i, taskLength);
}
}
// Initial setup:
function init() {
'use strict';
//document.getElementById('theForm').onsubmit = addTask;
var elem1 = document.getElementById("submit");
elem1.addEventListener("click", addTask, false);
var elem2 = document.getElementById("delete");
elem2.addEventListener("click", deleteTask, false);
} // End of init() function.
window.onload = init;ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER