16

Este es el código, quiero que al clickear en ¿Quieres reservar? se muestre el div "calendario_reserva", pero algo falla:

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/

5
  • Qué es lo que falla? Cual es el error?
    – Lobos
    Commented el 2 jul. 2019 a las 11:54
  • Desde un snippet quitando las etiquetas <form> funciona, no tengo ni idea de por que... Si alguien sabe que puede ser que lo comente.
    – x3k
    Commented el 2 jul. 2019 a las 12:11
  • @x3k_js He puesto una respuesta explicando lo que pasa, por si tienes curiosidad Commented el 2 jul. 2019 a las 14:15
  • @PabloLozano Muchas gracias por explicar el motivo del error, no tenía idea de lo que comentas en tu respuesta tampoco me había dado nunca por poner un id igual que el nombre de una función. Pero lo tendré en cuenta!
    – x3k
    Commented el 3 jul. 2019 a las 6:28
  • Voto por cerrar porque no se relaciona esta pregunta con la construcción de la pregunta
    – Gonzalo
    Commented el 7 mar. 2021 a las 1:06

5 respuestas 5

12

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>

11

Cambia el nombre de la función activar_reserva por activarReserva y en vez de usar el método onclick usa el método 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>

1
  • Con onclick también funciona, de todas maneras yo estaba probando en el fiddle adjuntado por el OP y no he encontrado la manera de hacerlo funcionar y había probado a cambiar el nombre de la func con camel case como en tu caso.
    – x3k
    Commented el 2 jul. 2019 a las 12:47
5

El problema se encuentra en que no puedes tener el mismo nombre para la identificación del elemento y para la función que quieres realizar para el elemento, con el mismo nombre:

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>

Igualmente, te dejo otra manera de escribir la función, de forma más sencilla:

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>

2

Una forma de hacerlo seria llamando un listener y quitando el método del html

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

aquí te dejo la respuesta con 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>

Espero te sirva

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.