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.
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, 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>
<form>
funciona, no tengo ni idea de por que... Si alguien sabe que puede ser que lo comente.