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

为什么 onclick 对我不起作用？

  • 772

这是代码，我想要在单击您要预订吗？显示“calendario_reservation”div，但有问题：

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. 欢迎来到 HTML DOM 的奇特之处。

    这不是 Javascript 的错，而是DOM 在浏览器中的实现方式。

    window[name]

    返回指定的元素或元素集合。

    作为一般规则，依赖于此会导致代码脆弱。最终映射到此 API 的 ID 可能会随着时间的推移而变化，例如，在 Web 平台中添加了新功能。而不是这个，使用 document.getElementById()or document.querySelector()。

    HTML5 非规范（不推荐）允许访问具有唯一 ID 的任何元素，如下所示：

    window[id];

    因此，您定义了input这样的元素：

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

    发生了什么事？

    通过声明该元素，window.activate_reservation 成为与 具有相同值的有效属性document.getElementById('activar_reserva')。您声明的函数与此元素冲突并且不再可访问。更改函数的 ID 或名称，一切正常。

    无论如何，我建议使用该方法addEventListener来处理文档元素上的事件。

    确认：

    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

    将函数重命名activar_reserva为activarReserva，而不是使用方法onclick使用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. 问题是元素 id 和要为元素执行的函数不能使用相同的名称，名称相同：

    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>

    同样，我为您提供另一种编写函数的方法，以更简单的方式：

    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. 一种方法是调用侦听器并从 html 中删除该方法

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

  5. 在这里我用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>

    希望对你有帮助

    • 1