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

Question

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

I see an error message (Uncaught TypeError: Cannot read property 'addEventListener' of null) I ithink the problem is (getElementsByTagName) But anyway it cannot reach Element what is the problem i want anser in thes problem

Answer 1

1. for attribute's value must be the id of an element and not the class or name of the element.

Ref: https://www.w3schools.com/tags/att_label_for.asp

2. You have used an extra " in <label for="rdb_disease" "> .

3. Added an id rbd_disease

4. name correction for <input> tag. diseease => disease

5. Used ternary operator.

6. Created variable disease_panel .

7. Changed the default display of disease_panel to 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>