javascript - 无法读取具有值、innerHTML 或选中的复选框的值

Question

我正在做一个基本的(因为我不熟练，只是喜欢玩弄一些小东西来学习)数据库项目，通过选中复选框来设置东西。但是，当尝试选中一个框并读取它是否被选中时，它总是显示为“null”。我试过 .value、.innerHTML 和 .checked。没有什么能让我到那里。我想要做的就是使用 getElementById 获取输入(即选中或未选中)并将其存储在 var 中，然后比较 bool 值是否为 true 或 false 以相应地设置数据库中的值。

function createSheet() {

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

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

错误信息:无法读取 null 的“选中”属性。

编辑:感谢您的回答!我没有显示这些行，因为我认为它们没有那么重要，但我错了，所以它们在这里:

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;
}

HTML 内容如下:

<section id="container">

    </section>

/编辑

有什么建议吗？

Answer 1

一些事情:

• 您不需要 document.getElementById，因为您已经有了 checkbox。
• 正如其他人所述，要使用 document.getElementById，您需要为复选框元素设置一个 id。并且您还需要将元素添加到文档中。

checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "idString"

console.log(checkbox.checked)

document.body.appendChild(checkbox)

console.log(document.getElementById("idString").checked)