Uncaught TypeError: undefined is not a function - Javascript

Question

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

Rory McCrossan · Accepted Answer · 2015-01-16 10:45:02Z

2

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

answered Jan 16, 2015 at 10:45

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Milind Anantwar · Accepted Answer · 2015-01-16 10:45:04Z

0

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

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

answered Jan 16, 2015 at 10:45

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Comments

Akshat · Accepted Answer · 2015-01-16 10:47:46Z

0

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

answered Jan 16, 2015 at 10:47

Akshat

4594 silver badges9 bronze badges

1 Comment

Harry Over a year ago

Thank you. I didn't wrap the event as a jQuery object. It works now.

Collectives™ on Stack Overflow

Uncaught TypeError: undefined is not a function - Javascript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related