Why can’t Javascript find a page tag?

Asked

Viewed 116 times

1

I have a simple question:

Why mine alert does not display the attribute value name button? Strangely if I insert javascript code after tag <button> the alert works normally. Follow the code that does not work:

<html>
    <head>
        <title></title>
    </head>

    <script type="text/javascript">
        var x = document.getElementById('a').name;
        function aoba() {
            alert(x);
        };
    </script>
    <body>
        <button id="a" value="b" onClick="aoba()" name="botão"> BOTÃO 1 </button>
    </body>
</html>
javascript
  • 1

    You can [Edit] the HTML question that we help to format. As it is hard to read the code...

  • If you put that var x = document.getElementById('a').name; at the end of the body, or this whole Javascript inside window.onload = function(){ ... } that would have worked

  • Thanks for the help, I think I understand how the DOM charging mode works.

  • Great. If you want you can mark one of the answers as accepted. See you soon.

  • @Danieldesantanasforzim, If any answer solved your problem, you can click on V next to the answer and mark your question as answered.

3 answers

2

Javascript accesses HTML via DOM, which is a representation of HTML in Javascript. What happens is that the DOM is not yet ready/interpreted when you run your code. In fact at the time the tag head is read document is not yet accessible to Javascript.

So you have to put your code after the browser reads the HTML you want. You can do this by placing Javascript at the bottom of the page, before the tag closes body or put this script inside a function that is called after the page loads (and in this case may be inside the head as it is now):

window.onload = function(){
    var x = document.getElementById('a').name;
    function aoba(){
        alert(x);
    };
}

That one function running when DOM is loaded can be more complex if necessary. But for example window.onload serves well.

__

Note, I just noticed your tag script is not even inside the body nor the head. It’s got to be inside one of them.

  • 1

    Thanks for the help, I think I understand how the DOM charging mode works.

1


Voce can use the following code I think will work 

<body onload="aoba()">

you can be sure that it will work because you are trying to load the variable before the DOM is created, then in case it does not exist yet, but with this code snippet Voce will make sure that once the DOM is created it loads the script.

abrsss

1

What happens in your code is that you are capturing the name of its bud, before it was created in the tree GIFT. To solve this, yours Tag script should be below the button.

<button id="a" value="b" onClick="aoba()" name="botão"> BOTÃO 1 </button>
<script type="text/javascript">
  var x = document.getElementById('a').name;

 function aoba(){alert(x);}; 

</script>

It can also, capture the name within the method to be called, this solves the problem

function aoba(){
    var x = document.getElementById('a').name;
    alert(x);
}

And for the event onload from your window.

<script type="text/javascript">
    var x;

    function aoba(){alert(x);};

    window.onload = function(){ // acrescenta o name em x quando a pagina terminar se ser carregada.
        x = document.getElementById('a').name;
    }

</script>

  • Thanks for the help, I think I understand how the DOM charging mode works.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.