Home / Questions / 65053
Accepted
Jogofus
Asked: 2020-04-25 07:03:46 +0800 CST 2020-04-25 07:03:46 +0800 CST

onclick 事件没有响应

  • 772

我正在尝试运行此代码：

    <style type="text/css">
        #boton{
            width: 50px;
            height: 30px;
            display: block;
            margin:30px;
        }

        img{
            width: 300px;
            height: 200px;
            margin:30px;
        }
    </style>

    <script type="text/javascript">
        var boton = document.getElementById('boton');
        boton.onclick = function(){
            var imagen = document.getElementById('foto');
            imagen.style.display ='none';
        }
    </script>
</head>
<body>
    <button id="boton">Click</button>
    <img src="header.jpg" id="foto">
</body>

问题是它不会onclick以任何方式加载事件。我之前也尝试过创建函数并在事件发生时调用它，但它不起作用。对我有用的唯一方法是输入内联代码，我不想那样做。代码放在一个单独的文件中。

javascript

4 Answers

  1. Best Answer

    可能是因为文档尚未完成解析和加载。

    作为建议，一些要点：

    注意 HTML 解析和加载过程

    每个文档都经过一个解析阶段，最终被加载并变得可用。DOM（对象文档模型）是一个允许您与文档交互的接口。这个接口负责与 HTML 交互，将每个标签存储在树中的一个Node中，这无非是标签在接口中的表示。

    这和你的问题有什么关系？当您与尚未完全加载的文档进行交互时，您很可能会得到一个空引用，因为它尚未被解析并且在 DOM 树中不可用。

    一个好的做法是在加载文档时选择元素。在纯中，它是通过捕获事件来完成的DOMContentLoaded：

     document.addEventListener('DOMContentLoaded', function() {
    // selecciona los elementos aquí
});

    在中，它是由自定义事件完成的ready：

    $(document).on('ready', function() {
    // selecciona los elementos aquí
});

    这确保了节点在 DOM 树中可用。

    不要将脚本放在标题中

    async除非您使用or属性标记这些脚本defer，否则不要将它们放在标题中，因为在解析脚本之前不会继续进行文档解析。而是将脚本放在结束正文之前：

    <script>
    // código abcdeghi
</script>
</body>

    与元素交互时请牢记这些要点。

    • 3

  2. 尝试制作功能ocultar()并将其分配onclick为按钮的属性。

    <script type="text/javascript">

     function ocultar(){
        var imagen = document.getElementById('foto');
        imagen.style.display ='none';
    }
</script>
</head>
<body>
    <button id="boton" onclick="ocultar();">Click</button>
    <img src="header.jpg" id="foto">
</body>

    如果没有，请尝试 JQuery：

    $(document).ready(function() {
      $('#boton').on('click', function() {

        var imagen = document.getElementById('foto');
        imagen.style.display = 'none';

      });

    });
    #boton {
  width: 50px;
  height: 30px;
  display: block;
  margin: 30px;
}

img {
  width: 300px;
  height: 200px;
  margin: 30px;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <button id="boton">Click</button>
  <img src="http://icdn.pro/images/es/j/p/jpg-imagen-icono-8802-128.png" id="foto">
</body>

    • 1

  3. 根据html流程：首先执行<script>，然后执行<body>，我建议您将其放在<script>后面<body>：

    <body>
    <button id="boton">Click</button>
    <img src="header.jpg" id="foto">
</body>
<script type="text/javascript">
 var boton = document.getElementById('boton');
 boton.onclick = function(){
  var imagen = document.getElementById('foto');
  imagen.style.display ='none';
 }
</script>

    • 1

  4. 您遇到的问题是执行 javascript 时按钮尚未加载到 DOM 中。在他们在评论中提供的 jsFiddle 中，这不会发生，因为 jsFiddle 已经负责在相应的事件中加载 javascript。

    当 DOM 完成加载时，有很多方法可以让你的代码运行。

    将代码放在正文的末尾。

    我们颠倒顺序，将 script 标签放在 body 标签的末尾：

    <html>
  <head>
    <style type="text/css">
        #boton{
            width: 50px;
            height: 30px;
            display: block;
            margin:30px;
        }

        img{
            width: 300px;
            height: 200px;
            margin:30px;
        }
    </style>
</head>
<body>
    <button id="boton">Click</button>
    <img src="header.jpg" id="foto">
    <script type="text/javascript">
        var boton = document.getElementById('boton');
        boton.onclick = function(){
            var imagen = document.getElementById('foto');
            imagen.style.display ='none';
        }
    </script>
</body>
</html>

    我们使用对象的 'DOMContentLoaded' 事件document：

    <script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
            var boton = document.getElementById('boton');
            boton.onclick = function(){
                var imagen = document.getElementById('foto');
                imagen.style.display ='none';
            }
}, false);
        </script>

    我们使用对象的“加载”事件window：

    <script type="text/javascript">
window.addEventListener('load', function() {
            var boton = document.getElementById('boton');
            boton.onclick = function(){
                var imagen = document.getElementById('foto');
                imagen.style.display ='none';
            }
}, false);
        </script>

    或者

    让我们以对象的“onreadystatechange”事件为例document：

    <script type="text/javascript">
document.attachEvent('load', function() {
            var boton = document.getElementById('boton');
            boton.onclick = function(){
                var imagen = document.getElementById('foto');
                imagen.style.display ='none';
            }
});
        </script>

    我们使用对象的“onload”事件window：

    <script type="text/javascript">
window.attachEvent('onload', function() {
            var boton = document.getElementById('boton');
            boton.onclick = function(){
                var imagen = document.getElementById('foto');
                imagen.style.display ='none';
            }
});
        </script>

    为什么会有这么多事件和这么多可能性？这不是更令人困惑吗？

    主要原因是兼容性问题。例如DOMContentLoaded，它是最普遍的事件，但它在 IE8 和更早版本中不起作用。

    • -1