无法读取带有value，innerHTML或checked复选框的值

Question

I'm doing a basic (becuse I'm not skilled and just like to play around bulidning small things to learn) database project, setting things by checking checkboxes. However, when trying to check a box and read if it is checked or not checked it always reads "null". I've tried .value , .innerHTML and .checked . Nothing gets me there. All I'm trying to do is to pick up the input (ie checked or not checked) with getElementById and store it in a var, and later on compare if the boolean is true och false to set the value in the databas accordingly.

function createSheet() {

var _container = document.getElementById("container");

checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    var valueOfId = document.getElementById("idString").checked;

Error messege: Cannot read property 'checked' of null.

EDIT: Thanks for the answers! I didn't show these lines since I didn't think they mattered that much, but I was wrong so here they are:

function createSheet() {
var _container = document.getElementById("container");
for (var i = 0; i < 4; i++) {
    p = document.createElement("p");
    spanBird = document.createElement("span");
    checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.id = "myCheck" + i;
    checkbox.value = 0;
    checkbox.checked = birds.birdList[i].seen;
    spanBird.innerHTML = birds.birdList[i].name;
    p.appendChild(spanBird);
    p.appendChild(checkbox);
    container.appendChild(p);
    console.log(document.getElementById("myCheck" + i));
    document.getElementById("myCheck" + i).addEventListener("click", readBox);
    }
}

function readBox(){
getId();
theId = theId.substring(7);
console.log("idString: " + idString);
var valueOfId = document.getElementById("idString").checked;
}

and the HTML reads:

<section id="container">

    </section>

/EDIT

Any suggestions?

Answer 1

Couple things:

• You don't need document.getElementById , since you have checkbox already.
• As stated by others, to use document.getElementById, you need to set a id to the checkbox Element. And you also need to add the element to the document.

 checkbox = document.createElement("input"); checkbox.type = "checkbox"; checkbox.id = "idString" console.log(checkbox.checked) document.body.appendChild(checkbox) console.log(document.getElementById("idString").checked) 

Answer 2

Actually, it's not that the property checked is null, your parent object is null.

I mean, this part:

document.getElementById("idString")

is returning null, so it can't access the checked property.

You need to first set the element's id with this

checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.setAttribute("id", "idString");
document.body.appendChild(checkbox)
var valueOfId = document.getElementById("idString").checked;

Then you should be able to access the value

Answer 3

In order to work you id first need create the attributes for your element like this.

You cant call by id if it isnt instantiate. Try out.

HTML

<div id="content"></div>    

JAVASCRIPT

  checkbox = document.createElement("input");
  checkbox.setAttribute("id", "idString");
  checkbox.setAttribute("type", "checkbox");
  checkbox.setAttribute("value", "0");

   var element = document.getElementById("content");
   element.appendChild(checkbox);
   var valueOfId = document.getElementById("idString").value;
   console.log(valueOfId);