So I am trying to make a simple todo list, in which I have check boxes for each list item I create. Each time I change the checkbox associated with a certain task, I want to call a function that will have an if else statement. The if else statement will tell me if the box is checked or unchecked, and do code based on that logic. The problem is, I don't know how to access the specific checkbox I am referring to, since each task is created through javascript and does not have a unique id.
So with that being said my questions are:
How do I refer to the specific checkbox I am changing? do I use the "this" keyword? and if so, what exactly is "this" referring to in this particular circumstance?
Here is my js code:
$("#add").button();
$("#remove").button();
//Constructor for ToDo Object
function ToDo(name){
this.name = name;
}
ToDo.prototype.addItem = function(string){
var list = document.querySelector("#list");
var listItem = document.createElement("div");
var listItemPar = document.createElement("p");
var listItemText = document.createTextNode(string);
var checkBox = document.createElement("input")
checkBox.setAttribute('type','checkbox');
checkBox.className = "checkBoxes"
checkBox.setAttribute("onchange","checkedBoxes()")
var removeButton = document.createElement("button")
removeButton.className = "removeButtons"
list.appendChild(listItem);
listItem.appendChild(listItemPar);
listItemPar.appendChild(listItemText);
listItem.appendChild(checkBox);
listItem.appendChild(removeButton);
$("button.removeButtons").button();
$(".removeButtons").hide();
document.querySelector("#input").value = "";
};
ToDo.prototype.removeItem = function(){
console.log("remove item");
}
document.querySelector("#remove").addEventListener("click",function(){
item = new ToDo();
item.removeItem();
window.alert("hi");
})
document.querySelector("#add").addEventListener("click",function(){
var item = new ToDo();
item.addItem(document.querySelector("input").value);
})
function checkedBoxes(){
//function I am referring to
}
So in the code, I am referring to checkBox.setAttribute("onchange","checkedBoxes()"), and the function is at the bottom. The HTML is really not super important since I am creating almost everything through javascript, but if you need to look at it to help let me know.
Thanks in advance
Aucun commentaire:
Enregistrer un commentaire