Uncaught TypeError: undefined is not a function - Javascript

1
votes

I'm trying to create a simple to-do list using JavaScript and jQuery, and one of the main functions is to be able to toggle between two states for any list item (pending or completed) through a click event.

Here is the markup for the page:

<body>
    <div id = 'page'>
        <h2>To Do Items</h2>
        <form id = 'itemForm'>
            <input type='text' id='itemDesc' placeholder='Add Item' />
            <input type='submit' id = 'addBtn' value ='ADD' />
        </form>
        <ul>
            <li class ='pending'>First item</li>
            <li>Second item</li>
            <li>Third item</li>
        </ul>
    </div>
<script type="text/javascript" src='jquery-1.11.2.js'></script> 
<script type="text/javascript" src='todoScriptjQuery.js'></script>  
</body>

and here is the script for the adding and toggling function: $(function() { /ADD LIST ITEM/ var $newItem = $('#itemDesc'); var $itemForm = $('#itemForm'); var $itemValue;

$itemForm.on('submit', function (e){
    e.preventDefault();
    $itemValue = $('<li class = "pending">');
    $itemValue.append($newItem.val());
    $clear = $('<img class = "icon-invisible">');
    $clear.attr('src', 'Images/png/clear.png');
    $itemValue.append($clear);

    $('ul').prepend($itemValue);
});




/*TOGGLE BETWEEN COMPLETE AND PENDING STATE*/
$('li').on('click', function(e){
    var $target = e.target;
    e.preventDefault();

    switch($target.attr('class')) {
        case 'pending':
            doneItem($target);
            break;
        case 'completed':
            revertItem($target);
            break;
    }
});


function doneItem($target) {
    $target.attr('class', 'completed');
}

function revertItem($target) {
    $target.attr('class', 'pending');
} });

The problem I'm having is that the toggle function logs an error in the console saying: Uncaught TypeError: undefined is not a function on the line where the switch statement starts. I've added a conditional just to confirm that my jQuery loads properly and it does. So I'm a bit lost as to what to try next.

Any pointers would be helpful. Thanks

3
javascriptjqueryhtml

3 Answers

2
votes

e.target is a DOM element, not a jQuery object, so does not have the attr() method hence the undefined error. You need to convert it to a jQuery object:

var $target = $(e.target);
0
votes

You need to convert target object to jquery object before using it with .attr()

 var $target = $(e.target);
 e.preventDefault();
0
votes

Wrap your e.target with JQuery like this, it should work

$('li').on('click', function(e){
var $target = $(e.target);
e.preventDefault();

switch($target.attr('class')) {
    case 'pending':
        doneItem($target);
        break;
    case 'completed':
        revertItem($target);
        break;
}
});