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

onclick event not responding

  • 772

I am trying to run this code:

    <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>

The problem is that it doesn't load the event onclickin any way. I have also tried to create the function before and call it when the event happens, but it doesn't work. The only way that works for me is by entering the code inline, and I don't want to do it that way. code in a separate file.

javascript

4 Answers

  1. Best Answer

    It is possible that it could be because the document has not finished parsing and loading yet.

    As a recommendation, some important points:

    Be aware of the HTML parsing and loading process

    Every document goes through a parsing stage and is finally loaded and becomes available. The DOM (Object Document Model) is an interface that allows you to interact with the document. This interface is in charge of interacting with the HTML, storing each tag in a Node within a tree, which is nothing more than the representation of the tag in an interface.

    What does this have to do with your question? That when you interact with the document when it hasn't been fully loaded yet, you will most likely get a null reference because it hasn't been parsed yet and isn't available in the DOM tree .

    A good practice is to select the elements when the document has been loaded . In pure it is done by capturing the event DOMContentLoaded:

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

    In it is done by custom event ready:

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

    This ensures that the nodes are available in the DOM tree.

    Don't put scripts in the header

    Unless you mark these scripts with the asyncor attribute defer, do not put them in the header because document parsing will not proceed until the scripts have been resolved. Instead put the scripts before the closing body:

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

    Keep these points in mind when interacting with the elements.

    • 3

  2. Try making the function ocultar()and assigning the onclickas an attribute of the button.

    <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>

    If not, try 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. According to the html flow : first the is executed <script>and then the <body>, I recommend you place the <script>after the <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. The problem you are running into is that the button is not yet loaded in the DOM when the javascript is executed. In the jsFiddle that they provided in the comment, this does not happen, since jsFiddle already takes care of loading the javascript in the corresponding event.

    There are many ways to get your code to run when the DOM has finished loading.

    Put the code at the end of the body.

    We reverse the order and put the script tag at the end of the body tag:

    <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>

    We use the 'DOMContentLoaded' event of the object 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>

    We use the 'load' event of the object 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>

    OR

    Let's take the 'onreadystatechange' event of the object 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>

    We use the 'onload' event of the object 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>

    Why are there so many events and so many possibilities? Isn't that a little more confusing?

    The main reason is due to a compatibility issue. For example DOMContentLoaded, it is the event that is most widespread, but it does not work in IE8 and earlier.

    • -1