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.

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

Open in new window


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

Open in new window

LVL 1
capturetheflagAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
Test page : http://jsfiddle.net/Zrwka/

You still need to work on your gloval array : tasks

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

    if (task.value) {

        // Add the item to the array:
        tasks.push(task.value);

        updateThePage();
        
    } // End of task.value IF.

    // Return false to prevent submission:
    return false;

} // End of addTask() function.

function updateThePage() {
    // Reference to where the output goes:
    var output = document.getElementById('output');
    // For the output:
        var 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;
}

function deleteTask() {
    var inputTask = document.getElementById('task');
    var taskLength = tasks.length;

    var i = tasks.indexOf(inputTask.value);
    if (i != -1) {
        tasks.splice(i, 1);
    }
    updateThePage();

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

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
capturetheflagAuthor Commented:
Thanks, great stuff!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.