Develop Reference

onclick of child element is causinf parent button to activate

I have 1 function that creates a new checkbox with a delete button to remove it. However when using onclick for the delete button, it causes the it to be deleted when the create checkbox is activated so that nothing is there in the first place.
<script>
var list = document.getElementById("list");
var i = 0;
function add_client(form) {
var div = document.createElement("div");
div.setAttribute("id", "div"+i.toString())
var check = document.createElement("input")
check.setAttribute("type", "checkbox");
check.setAttribute("id", "check"+i.toString());
var label = document.createElement("label");
label.setAttribute("for", "check"+i.toString());
label.setAttribute("id", "label")
txtNode = document.createTextNode(form.value);
label.appendChild(txtNode);
var br = document.createElement("br");
div.appendChild(check);
div.appendChild(label);
list.appendChild(div)
i++;
var del = document.createElement("input");
del.setAttribute("type", "button");
del.setAttribute("value", "Delete");
del.setAttribute("id", "del")
div.appendChild(del);
del.onclick = del.remove();
div.appendChild(br);
}
</script>
i know this is a DOM issue but cannot get around it.... any ideas?

Is there a reason why my check mark box won't be selected when I click the span tag?

//init function
function init() {
createTaskElements();
}
//create elements and add them to the unordered list
//set attributes
function createTaskElements() {
const arrChores = ["Walk the dog", "Set dinner table", "Load dishwasher", "Empy Dishwasher", "Clean dinner plates"];
for (var i = 0; i < arrChores.length; i++) {
var task = document.createElement("LI");
task.id = "task";
var input = document.createElement("INPUT");
input.type = "checkbox";
input.id = "chore";
var span = document.createElement("SPAN");
span.innerHTML = arrChores[i];
span.addEventListener("click", crossClick);
task.appendChild(input);
task.appendChild(span);
task.addEventListener("click", crossOut);
document.getElementById("itemsList").append(task);
}
}
//set the class name of the list item whenever it is clicked to completed
function crossOut() {
this.className = "completed";
}
function crossClick() {
}
W
hat I want to do when I click the span tag it checks the check box next to the element, but it isn't working.
I know the .checked method, but I'm not sure how I would get my function to work.

Replace
var span = document.createElement("SPAN");
span.innerHTML = arrChores[i];
with
const label = document.createElement("label");
label.textContent = arrChores[i];
label.htmlFor = input.id;
You don't need to add any Javascript behaviour to that label as it already comes with the functionality you ask for.

Not able to replace checkboxes Javascript

I am creating a mozilla add on for a web page. Using the attached Javascript code I am able to create checkbox. The checkbox should replace with other checkbox depending on the selected value in dropdown. Onclick on dropdown I am calling fun_sub_cat function which is creating checkbox and also replacing but it replace only once. For eg: If there are 2 option in dropdown 1 and 2, Selecting option 1 checkbox values should 1,2,3 and for option 2 checkbox values should be a,b,c.
On Click function it creates checkbox and changing the value for the first time replaces the checkbox value as well however when I click 3rd time on dropdown or change the value, it does not work. It attains the 2nd time changed checkbox values.
var k = 0;
function fun_cat_sub() {
console.log("Value Changed");
var Myarry = "";
if(document.getElementById('sub_cat').value == 'Password Reset'){
Myarry = check_list1;
if(k == 0){
console.log("creating checkbox for the first time");
k = k+1;
for (var i = 0; i < Myarry.length; i++) {
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.id = "checkBox"+i;
checkbox.value = Myarry[i];
checkbox.class = "_class";
checkbox.appendAfter(br_3);
var lab_chk = document.createElement('label');
lab_chk.innerHTML = Myarry[i];
lab_chk.id = "lab_chk"+i;
lab_chk.value = Myarry[i];
lab_chk.style.marginLeft = "10px";
lab_chk.appendAfter(checkbox);
document.createElement('br').appendAfter(lab_chk);
}
}
else if(k != 0){
console.log("I am in 1st Loop");
checking(Myarry);
}
}
else {
Myarry = check_list2;
console.log("I am in 2nd Loop");
checking(Myarry);
}
}
function checking(Myarry){
console.log(Myarry.length);
for (var i = 0; i < Myarry.length; i++) {
var old_chk = document.getElementById('checkBox'+i);
var new_chk = document.createElement("input");
new_chk.type = "checkbox";
new_chk.id = "checkBox"+i;
new_chk.value = Myarry[i];
old_chk.parentNode.replaceChild(new_chk, old_chk);
var old_lab_chk = document.getElementById('lab_chk'+i);
var new_lab_chk = document.createElement('label');
new_lab_chk.innerHTML = Myarry[i];
new_lab_chk.style.marginLeft = "10px";
old_lab_chk.parentNode.replaceChild(new_lab_chk, old_lab_chk);
}
}

How to space my checkboxes and the text associated with them

I have these check boxes that are created with a javascript function:
I would like the text to appear to the right of the checkbox and all of the text to be on one line.
Here is the javascript function and the html:
function receiveAnswer(response) {
// var aSeats = document.getElementById("aSeats");
// aSeats.options.length = 0;// clear it out
//
// for (var i = 0; i < response.aSeats.length; i++) { // add the items back in
// var option = aSeats.appendChild(document.createElement("option"));
// option.value = i;
// option.appendChild(document.createTextNode(response.aSeats[i]));
// }
var aSeats = document.getElementById("aSeats");
while (aSeats.childNodes.length > 0) { // clear it out
aSeats.removeChild(aSeats.childNodes[0]);
}
for (var i = 0; i < response.aSeats.length; i++) { // add the items back in
var input = aSeats.appendChild(document.createElement("input"));
input.value = i;
input.type = "checkbox";
var br = aSeats.appendChild(document.createElement("br"));
input.appendChild(document.createTextNode(response.aSeats[i]));
var br = aSeats.appendChild(document.createElement("br"));
var br = aSeats.appendChild(document.createElement("br"));
var br = aSeats.appendChild(document.createElement("br"));
var br = aSeats.appendChild(document.createElement("br"));
var br = aSeats.appendChild(document.createElement("br"));
}
}
html code:
<div name="aSeats" id="aSeats">
<input type="checkbox">
</div>

Why not use jQuery.
Check working example http://jsfiddle.net/FxgYz/

Create a separate div to put the text in and position that div to the side of the input box, something like:
var div = document.createElement("div");
div.style.width = 100;
div.innerHTML = text;
etc.

Checkbox to change textdecoration input field

With javascript, i want my checkbox to change the text decoration of an input text field.
So when it's checked, the text in the input text field turns bold.
Remember i'm learning so i'm not a pro as you guys ;)
I thought something like this;
var checkbox = create("input");
checkbox.type = "checkbox";
checkbox.id = "checkboxId" + counter;
div.appendChild(checkbox);
checkbox.onClick="boldChange(this)"
var input = create("input");
input.type = "input";
input.id = "inputId" + counter;
div.appendChild(input);
function boldChange()
var boldgroup = document.getElementsByName(el.name);
for (var b=0; boldgroup[b]; ++b)
inputId.style.textDecoration = boldgroup[b].checked ? 'bold' : 'none';
}
How can i make this work?
Thank you so much in advance

Here is a working JSFiddle example based on your code above: Link to example
Code snippet: (place below </body> so that all of DOM is loaded)
<script>
var div = document.getElementById('div'),
counter = 0;
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "checkboxId" + counter;
div.appendChild(checkbox);
checkbox.onclick = boldChange;
counter++;
var input = document.createElement("input");
input.type = "text";
input.id = "inputId" + counter;
div.appendChild(input);
function boldChange() {
input.style.fontWeight = (checkbox.checked)?'bold':'normal';
}
</script>