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
3 answers
solution1
2 ACCPTED 2015-01-16 10:45:02
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);
solution2
0 2015-01-16 10:45:04
You need to convert target object to jquery object before using it with .attr()
var $target = $(e.target);
e.preventDefault();
solution3
0 2015-01-16 10:47:46
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;
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.