为什么 getElementById 等 DOM 方法找不到元素？答案

【问题标题】：why does DOM method such as getElementById not find the element?为什么 getElementById 等 DOM 方法找不到元素？
【发布时间】：2021-04-24 11:35:50
【问题描述】：

<div>
    <label for="rdb_disease">Are you okay?</label>
    <div class="col-sm-9" class="rdb_disease">

        <input type="radio" id="no" name="rdb_diseease" value="0">
        <label for="no">No</label>

         <input type="radio" id="yas" name="rdb_diseease" value="1">
         <label for="yes">yes</label>
      </div>
</div>

<div id="disease_panel">
    <p>hello</p>
</div>

<script>

var rdb_disease = document.getElementById("rdb_disease");

function rdb_visible_hide_panel(rdb_name,panel_name) {

    var radio = rdb_name.getElementsByTagName("input");
    if (radio[1].checked == true) {
                panel_name.style.display = "block";
    } else {
                panel_name.style.display = "none";
    }
}

rdb_disease.addEventListener("change", function() { 
    rdb_visible_hide_panel(rdb_disease,disease_panel);
});

</script>

我看到一条错误消息（Uncaught TypeError: Cannot read property 'addEventListener' of null）我认为问题是（getElementsByTagName）但无论如何它无法到达 Element 我想在这些问题中解决什么问题

【问题讨论】：

这里发生了很多不正确的事情（几乎所有事情）。您是在什么阶段开始调试的？
这一行 rdb_disease.addEventListener("change", function()[ Noticeable The code works if used getElementById .
您使用了document.getElementById("rdb_disease")，但没有具有类似 ID 属性的元素。你只有这个类的一个元素。
你为什么不定义 id rdb_disease？只有<label for="rdb_disease" ">are you okay</label> 这不是标签。 for="rdb_disease" ".
您的 DOM 中没有元素具有元素 rdb_disease。两个输入字段都有名称 rub_disease 即 name="rdb_diseease" ，并且试图通过 document.getElementById("rdb_disease") 获取这些是不正确的。您应该通过属性名称获取元素

标签： javascript html

【解决方案1】：

for 属性的值必须是元素的 id，而不是元素的 class 或 name。

参考：https://www.w3schools.com/tags/att_label_for.asp

您在<label for="rdb_disease" "> 中使用了额外的"。
添加了一个 ID rbd_disease
name 更正<input> 标签。 diseease => disease
使用三元运算符。
创建变量disease_panel。
将disease_panel的默认display更改为none。

<div>
    <label for="rdb_disease">Are you okay?</label>
    <div class="col-sm-9" class="rdb_disease" id="rdb_disease">

        <input type="radio" id="no" name="rdb_disease" value="0">
        <label for="no">No</label>

         <input type="radio" id="yas" name="rdb_disease" value="1">
         <label for="yes">yes</label>
      </div>
</div>

<div id="disease_panel" style = "display : none">
    <p>hello</p>
</div>

<script>

var rdb_disease = document.getElementById("rdb_disease");
var disease_panel = document.getElementById("disease_panel");

function rdb_visible_hide_panel(rdb_name,panel_name) {
    var radio = rdb_name.getElementsByTagName("input");
    panel_name.style.display = radio[1].checked ? "block" : "none";
}

rdb_disease.addEventListener("change", function() { 
    rdb_visible_hide_panel(rdb_disease,disease_panel);
});

</script>

【讨论】：