current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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"));
}
share|improve this question
    
It is better if you make up html & insert it using the script instead of setting everything manually like createElement, checkbox.type, value etc –  Krishna Jul 20 '13 at 4:53

2 Answers 2

up vote 1 down vote accepted

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

share|improve this answer
up vote 0 down vote

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">
share|improve this answer
1  
It doesn't reload if it's not in a <form>. –  Barmar Jul 20 '13 at 5:00
    
good note!!! :) –  Mohammad Masoudian Jul 20 '13 at 5:03

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.