Home / Questions / 276102
Accepted
Antonio Ruiz
Asked: 2020-07-03 03:47:39 +0800 CST 2020-07-03 03:47:39 +0800 CST

Why doesn't onclick work for me?

  • 772

This is the code, I want that when clicking on Do you want to book? the "calendario_reservation" div is displayed, but something is wrong:

activar_reserva();

function activar_reserva(){
    if(document.getElementById('activar_reserva').checked){ 
        document.getElementById('calendario_reserva').style.display = "unset"; 
    }else{ 
        document.getElementById('calendario_reserva').style.display = "none"; 
    }
}
<form action="#" method="post">
  <input type="checkbox" id="activar_reserva" onclick="activar_reserva();">
  <label>¿Quieres reservar?</label>

  <div class="" id="calendario_reserva">
  AQUI UN CALENDARIO PARA SELECCIONAR LA FECHA.
  </div>

  <br/>
  <button type="submit" name="action" value="contestar" class="form-control fondo2 color1" style="margin-top:10px;">Enviar</button>

</form>

https://jsfiddle.net/ogdbt09v/

javascript

5 Answers

  1. Welcome to the oddities of the HTML DOM.

    This is not the fault of Javascript, but of the way the DOM is implemented in browsers .

    window[name]

    Returns the indicated element or collection of elements.

    As a general rule, relying on this will lead to brittle code. Which IDs end up mapping to this API can vary over time, as new features are added to the Web platform, for example. Instead of this, use document.getElementById()or document.querySelector().

    HTML5 non-normatively (not recommended) allows access to any element that has a unique ID as follows:

    window[id];

    Therefore, you have defined an element inputlike this:

    <input type="checkbox" id="activar_reserva" onclick="activar_reserva();">

    What has happened?

    By declaring that element, window.activate_reservation becomes a valid attribute that has the same value as document.getElementById('activar_reserva'). The function you declared conflicts with this element and is no longer accessible. Changing the id or the name of the function, everything works.

    In any case, I recommend using the method addEventListenerto handle events on the elements of your document.

    Verification:

    function activar_reserva(){
    if(document.getElementById('activar_reserva').checked){ 
        document.getElementById('calendario_reserva').style.display = "unset"; 
    }else{ 
        document.getElementById('calendario_reserva').style.display = "none"; 
    }
}

//aquí es una función
console.log(activar_reserva);
    <form action="#" method="post">
  <input type="checkbox" id="activar_reserva" onclick="console.log('Aquí es un elemento:',activar_reserva);">
  <label>¿Quieres reservar?</label>

  <div class="" id="calendario_reserva">
  AQUI UN CALENDARIO PARA SELECCIONAR LA FECHA.
  </div>

  <br/>
  <button type="submit" name="action" value="contestar" class="form-control fondo2 color1" style="margin-top:10px;">Enviar</button>

</form>

    • 12
  2. Best Answer

    Rename the function activar_reservato activarReservaand instead of using the method onclickuse the onchange.

    activarReserva();

function activarReserva(){
    if(document.getElementById('activar_reserva').checked){ 
        document.getElementById('calendario_reserva').style.display = "unset"; 
    }else{ 
        document.getElementById('calendario_reserva').style.display = "none"; 
    }
}
    <form>
  <input type="checkbox" id="activar_reserva" onchange="activarReserva()">
  <label>¿Quieres reservar?</label>
  <br/>

  <div class="" id="calendario_reserva">
    AQUI UN CALENDARIO PARA SELECCIONAR LA FECHA.
  </div>

  <br/>
  <button type="submit" name="action" value="contestar" class="form-control fondo2 color1" style="margin-top:10px;">Enviar</button>

</form>

    • 11

  3. The problem is that you cannot have the same name for the element id and for the function you want to perform for the element, with the same name:

    function Activar_reserva(){
    if(document.getElementById('activar_reserva').checked){ 
        document.getElementById('calendario_reserva').style.display = "unset"; 
    }else{ 
        document.getElementById('calendario_reserva').style.display = "none"; 
    }
}
    <form action="#" method="post">
  <input type="checkbox" id="activar_reserva" onclick="Activar_reserva();">
  <label>¿Quieres reservar?</label>

  <div class="" id="calendario_reserva">
  AQUI UN CALENDARIO PARA SELECCIONAR LA FECHA.
  </div>

  <br>
  <button type="submit" name="action" value="contestar" class="form-control fondo2 color1" style="margin-top:10px;">Enviar</button>

</form>

    Likewise, I leave you another way to write the function, in a simpler way:

    function reservar()
{
  var checkbox = document.getElementById('checkboxReserva');
  var elemento = document.getElementById('calendario');
  
  elemento.style.display = checkbox.checked ? 'block' : 'none';
}
    #calendario
{
  display: none;
}
    <input type="checkbox" id="checkboxReserva" onclick="reservar()">
<label for="checkboxReserva">¿Quieres reservar?</label>
<div id="calendario">Calendario de fechas.</div>

    • 5

  4. One way to do this would be to call a listener and remove the method from the html

    var buttonCheck = document.getElementById("activar_reserva");
buttonCheck.addEventListener("click",function(e){
   activar_reserva2);
},false);
    • 2

  5. here I leave the answer with jquery

    $("#activar_reserva").change(function() {
    if(this.checked) {
       $('#calendario_reserva').show()
    }
    else{
    	$('#calendario_reserva').hide()
    }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" method="post">

<input type="checkbox" id="activar_reserva">
<label>¿Quieres reservar?</label>

<div class="" id="calendario_reserva" hidden>
AQUI UN CALENDARIO PARA SELECCIONAR LA FECHA.
</div>

<br/>
<button type="submit" name="action" value="contestar" class="form-control fondo2 color1" style="margin-top:10px;">Enviar</button>

</form>

    I hope it helps you

    • 1