Skip to main content
1 de 3
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92

#Bienvenido a las rarezas del DOM de HTML.

Esto no es culpa de Javascript, sino de la manera en que se implementa el DOM en los navegadores. HTML5, de manera no normativa (no recomendada) permite acceder a cualquier elemento que tenga una ID única de la siguiente manera:

window[id];

Por tanto, tú has definido un elemento input así:

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

##¿Qué ha ocurrido?

Al declarar ese elemento, window.activar_reserva pasa a ser un atributo válido que tiene el mismo valor que document.getElementById('activar_reserva'). La función que tú has declarado entra en conflicto con este elemento y ya no es accesible. Cambiando el id o el nombre de la función, todo funciona.

En cualquier caso, te recomiendo usar el método addEventListener para gestionar eventos en los elementos de tu documento.

Comprobación:

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>

Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92