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, сохраняя каждый тег в узле внутри дерева, что является не чем иным, как представлением тега в интерфейсе.

    Какое это имеет отношение к вашему вопросу? То, что когда вы взаимодействуете с документом, когда он еще не полностью загружен, вы, скорее всего, получите нулевую ссылку , потому что она еще не проанализирована и недоступна в дереве DOM .

    Хорошей практикой является выбор элементов после загрузки документа . В чистом это делается путем захвата события DOMContentLoaded:

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

    В это делается с помощью пользовательского события ready:

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

    Это гарантирует, что узлы доступны в дереве DOM.

    Не размещайте скрипты в шапке

    Если вы не пометите эти скрипты атрибутом asyncили 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. Проблема, с которой вы сталкиваетесь, заключается в том, что кнопка еще не загружена в DOM при выполнении javascript. В 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