why does DOM method such as getElementById not find the element?

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

There is a lot going on here that is not correct (Pretty much everything). At what stage coding this did you begin to debug? — Spangle
this line rdb_disease.addEventListener("change", function()[ Noticeable The code works if used getElementById . — Mostafa Hossny
You use document.getElementById("rdb_disease") yet there is not element with an ID attribute like that. You only have an element with this class. — VLAZ
Why didn't you define id rdb_disease? There is only <label for="rdb_disease" ">are you okay</label> This isn't a tag. for="rdb_disease" ". — jacobkim
There's no element in your DOM having element rdb_disease. Both the input fields have name rub_disease i.e name="rdb_diseease" , and trying to get those through document.getElementById("rdb_disease") is not correct . you should get element by attribute name — Arif H-Shigri

user12137152 user12137152 · Accepted Answer · 2021-01-20T07:44:53

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

You have used an extra " in <label for="rdb_disease" ">.
Added an id rbd_disease
name correction for <input> tag. diseease => disease
Used ternary operator.
Created variable disease_panel.
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>

why does DOM method such as getElementById not find the element?

1 Answers