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

Veo un mensaje de error (Uncaught TypeError: No se puede leer la propiedad 'addEventListener' de null) Creo que el problema es (getElementsByTagName) Pero de todos modos no puede llegar a Element ¿Cuál es el problema que quiero responder en este problema?

0
Mostafa Hossny 20 ene. 2021 a las 09:01

1 respuesta

La mejor respuesta
  1. El valor del atributo for debe ser el id de un elemento y no el class o name del elemento.

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

  1. Ha utilizado un " adicional en <label for="rdb_disease" ">.

  2. Se agregó una identificación rbd_disease

  3. Corrección de name para la etiqueta <input>. diseease => disease

  4. Operador ternario usado.

  5. Variable creada disease_panel.

  6. Se cambió el display predeterminado de disease_panel a 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>
0
user12137152 20 ene. 2021 a las 17:36