CODEWITHSUNDEEP
javascripthtmlcheckbox
Rohan Khajuria
Rohan Khajuria

Reputation: 716

Trouble adding checkboxes to HTML div using JS

As a noob at programming, I'm having some HTML/JS pHroblems. I'm trying to make a dynamic checkbox list where you can add tasks to complete. I've done my research, combing through at least 10 websites, and for some reason, nothing seems to be working. I can't find anything in the code, and I've tried multiple approaches. HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>To-Do List
</title>
<link href="Main Page Styling.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="mainJavascript.js"></script>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/aladin:n4:default.js" type="text/javascript"></script>
</head>

<body>
<header>
  <p>To-Do List</p>
</header>
<input type="text" id = "checkboxName">
<input type="submit" value="Add New Task" onClick="addTask()" id = "taskAdder">
<div id="toBeDone"></div>
</body>
</html>

JS:

var addTask = function () {

    /*var newCheckBox = document.createElement('input');
    var checkboxText = document.getElementById("checkboxName").value;
    newCheckBox.type = 'checkbox';
    newCheckBox.value = (checkboxText + '<br/>');

    var parentElement = document.getElementById("toBeDone");
    parentElement.appendChild(newCheckBox);*/



    /*var newCheckbox = document.createElement("input");
    newCheckbox.type = "checkbox";
    var checkboxTextNode = document.createTextNode(document.getElementById("checkBoxName").value);
    newCheckbox.appendChild(checkboxTextNode);

    document.getElementById("toBeDone").appendChild(newCheckbox);*/

    var newCheckbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.value = document.getElementById("checkboxName").value;
    document.getElementById("toBeDone").appendChild(newCheckbox);

    var label = document.createElement('label');
    label.htmlFor = document.getElementById("checkboxName").value;
    label.appendChild(document.createTextNode(document.getElementById("checkboxName").value));

    document.getElementById("toBeDone").appendChild(label);
    document.getElementById("toBeDone").appendChild(document.createElement("br"));
}

Upvotes: 0

Views: 7021

Answers (2)

Barmar
Barmar

Reputation: 780787

You're using the variable newCheckbox when you create the element and append it to the DIV, but checkbox when you set the type and value.

var newCheckbox = document.createElement("input");
newCheckbox.type = "checkbox";
newCheckbox.value = document.getElementById("checkboxName").value;
document.getElementById("toBeDone").appendChild(newCheckbox);

Your labels aren't working because the for attribute has to match the id of the checkbox, and you never give your checkboxes ids. It would be better if you simply wrapped the label around the checkbox, so the resulting HTML looks like:

<label><input type="checkbox" value="whatever">whatever</label>

I'll leave this as an exercise for you.

JSFIDDLE

Upvotes: 1

Mohammad Masoudian
Mohammad Masoudian

Reputation: 3491

you are using the submit type input.

when you click on submit button page reload will occur and you cant see the result of your javascript code

use a button instead

<input type="button" value="Add New Task" onClick="addTask()" id = "taskAdder">

Upvotes: 0

Related Questions