Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics (2014) Creating a Simple Drawing Application Perfect

Cui Gunter
Cui Gunter
12,518 Points
Posted by Cui Gunter
Cui Gunter
12,518 Points

What's the best way to target a element base on it's attribute within a function?

For the todolist project using pure javascript, I am attempting to redo the project using JQuery.

I am lost on how to use JQuery to target an element base on its type if the parent element is passed into the function and assigned to a variable. I am passing into a function a li element with input, buttons, and labels within the tag. The li is assigned to a variable call newTask. I am trying to target the input element with the type: checkbox.

I'm going to try to include my code for reference. Thanks for any help.

Cui Gunter
Cui Gunter
12,518 Points
Cui Gunter
Cui Gunter
12,518 Points

....

<!DOCTYPE html> <html> <head> <title>Todo App</title> <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">
</head> <body> <div class="container"> <p> <label for="new-task">Add Item</label><input id="new-task" type="text"><button>Add</button> </p>

  <h3>Todo</h3>
  <ul id="incomplete-tasks">
    <li><input type="checkbox"><label>Pay Bills</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
    <li><input type="checkbox"><label>Go Shopping</label><input type="text" value="Go Shopping"><button class="edit">Edit</button><button class="delete">Delete</button></li>

  </ul>

  <h3>Completed</h3>
  <ul id="completed-tasks">
    <li><input type="checkbox" checked><label>See the Doctor</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
  </ul>
</div>

<script type="text/javascript" src="js/jquery.js"></script>

</body> </html>

...

Cui Gunter
Cui Gunter
12,518 Points
Cui Gunter
Cui Gunter
12,518 Points

My JavaScript Code

var incompleteTasksHolder = document.getElementById("incomplete-tasks");
var completedTasksHolder = document.getElementById("completed-tasks");
var addItemSection = document.getElementById("new-task").parentNode;



var  incompleteTasks= function() {
    console.log("incomplete task");
}

var completedtasks = function() {
    console.log("completed task");
}

// ??? how to target the checkbox within the <li> in the bindTaskToEvent function

var bindTaskToEvent = function(listItem, checkBoxEventHandler) {
        console.log("bind function");
    var checkBox = $(listItem "")  
}

for (var i=0; i < incompleteTasksHolder.children.length; i += 1) {
    bindTaskToEvent(incompleteTasksHolder.children[i], incompleteTasks);
}

for (var i=0; i < completedTasksHolder.children.length; i += 1) {
    bindTaskToEvent(incompleteTasksHolder.children[i], completedtasks);
}

1 Answer

Jose Morales-Mendizabal
Jose Morales-Mendizabal
19,175 Points
Jose Morales-Mendizabal
Jose Morales-Mendizabal
19,175 Points

Try using an CSS attribute selector and the jQuery selection as such:

var element = $('input[type="checkbox"]'); // returns and selects all <input> elements with type attribute with a value of checkbox