Creating checkbox in javascript

Question

I'm trying to create a checkbox with Javascript and when it will be clicked on, time in format (hh:mm:ss) will display. The problem that I have is that it does not even create the checkbox and I don't know why. Here's my code:

document.write("<form><input type="checkbox"></form>")

Can anyone give me a hint where the problem is?

use this, var x = document.createElement("INPUT"); x.setAttribute("type", "checkbox"); — cracker, Jun 13 '14 at 09:03
Not exactly related, but why are you creating this input dynamically? There's nothing dynamic in the output, and this could be replaced with regular inline HTML code. Notice, that you can't use [`document.write()`](https://developer.mozilla.org/en-US/docs/Web/API/document.write) after the page has been parsed, hence your snippet can't be a part of an event handler. — Teemu, Jun 13 '14 at 09:05
@Teemu Exactly (as per my comments to answers)! It is related, because using `document.write` is a huge mistake. You either want to manipulate dynamically added element (and thus you use `createElement` to have handle to it) or you use plain HTML. — trejder, Jun 13 '14 at 09:29

score 4 · Accepted Answer · answered Jun 13 '14 at 09:00

4

First of all you are not escaping quotes;

document.write("<form><input type=\"text\"></form>") this will create textbox

try this

document.write('<form><input type="checkbox"></form>');

answered Jun 13 '14 at 09:00

saygun

1,409
12
24

Thank you, this fixed the problem! – MarisP Jun 13 '14 at 09:01
1

I prefer _Ishan Jain_'s answer much more, because it shows, how to correctly, dynamically create a checkbox (or any other element). `document.write` is a crap, because you don't have handle to created element to do _something_ with it. And you don't generate elements dynamically in Javascript to only put them to the document (you'd use plain HTML in this case). You most likely create them dynamically to do some operations, manipulate them somehow etc. – trejder Jun 13 '14 at 09:27

score 2 · Answer 2 · edited May 23 '17 at 12:21

2

In your code you are not escaping quotes.

You should escape the quotes.

document.write('<form><input type="checkbox"></form>')

But i suggest you to not use document.write(), because it's not a good practice. It replaces entire document.

So, you should try to create element dynamically using javascript.

Try this code:

var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "name";
checkbox.value = "value";
checkbox.id = "id";
document.body.appendChild(checkbox);

edited May 23 '17 at 12:21

Community

1
1

answered Jun 13 '14 at 09:12

Ishan Jain

7,501
9
45
72

Much better answer, see my comment to _saygun_'s answer! – trejder Jun 13 '14 at 09:27
@trejder: Thank you :) – Ishan Jain Jun 13 '14 at 09:43
No problem! :] BTW, if you want to say "thank you", simply upvote my comment (or question or answers). It seems, that this is how things works here in SE. – trejder Jun 13 '14 at 21:12

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

1

Working Fiddle

var cb = document.createElement('input');
cb.type = "checkbox";
cb.name = "name";
cb.value = "value";
cb.id = "id";
cb.addEventListener("click", showTime, false);

var lbl = document.createElement('label')
lbl.htmlFor = "id";
lbl.appendChild(document.createTextNode("show time"));

var container = document.getElementById('container');
container.appendChild(cb);
container.appendChild(lbl);

var sp = document.getElementById('time');

function showTime() {
    if (this.checked) {
        var today = new Date()
        sp.innerHTML = today.toString();
    } else {
        sp.innerHTML='';
    }
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 13 '14 at 09:16

Bhavik

4,508
3
25
43

Improve your answering quality, please: (a) don't just put a link and code, put some explanation, why your're proposing this or that solution, (b) paste only _important_ parts of code, the one you're referring to, not the entire code, (c) don't put junk like `Hope it helps..!!`, it is completely useless here. Thanks! – trejder Jun 13 '14 at 09:25

Creating checkbox in javascript

3 Answers3

Working Fiddle