1

Tenho uma dúvida simples:

Por que meu alert não exibe o valor do atributo name do botão? Estranhamente se eu inserir o código javascript após a tag <button> o alerta funciona normalmente. Segue o código que não funciona:

<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>
5
  • 1
    Podes editar a pergunta com o HTML que nós ajudamos a formatar. Como está é dificil ler o código...
    – Sergio
    29/06/2016 às 21:26
  • Se colocares esse var x = document.getElementById('a').name; no final do body, ou esse JavaScript todo dentro de window.onload = function(){ ... } isso já ia funcionar
    – Sergio
    29/06/2016 às 21:27
  • Obrigado pela ajuda, acho que entendi o funcionamento da modo de carregamento do DOM. 1/07/2016 às 14:20
  • Ótimo. Se quiseres podes marcar uma das respostas como aceite. Até breve.
    – Sergio
    1/07/2016 às 14:23
  • @DanielDeSantanaSforzim, Se alguma resposta resolveu o seu problema, você pode clicar no V ao lado da resposta e marcar sua pergunta como respondida. 1/07/2016 às 18:29

3 Respostas 3

2

O JavaScript acessa o HTML atravéz do DOM, que é uma representação do HTML em JavaScript. O que acontece é que o DOM ainda não está pronto/interpretado quando corres o teu código. Aliás no momento em que a tag head é lida document ainda não está acessível ao JavaScript.

Assim tens de colocar o teu código depois do Browser ler o HTML que queres. Podes fazer isso colocando o JavaScript no final da página, antes do fecho da tag body ou colocar esse script dentro de uma função que é chamada depois da página carregar (e neste caso pode estar dentro do head como está agora):

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

Essa função que corre quando o DOM está carregado pode ser mais complexa, caso necessário. Mas para o exemplo window.onload serve bem.

__

Nota, reparei agora que a tua tag script não está nem dentro do body nem do head. Tem de estar dentro de um deles.

1
  • 1
    Obrigado pela ajuda, acho que entendi o funcionamento da modo de carregamento do DOM. 1/07/2016 às 14:20
1

voce pode usar o seguinte codigo que acho que vai funcionar

<body onload="aoba()">

pode ter certeza que irá funcionar, pois voce esta tentando carregar a variavel antes do DOM ser criado, ai no caso ela nao existe ainda, mas com esse trecho de codigo voce vai fazer com que, assim que o DOM seja criado ele carregue o script.

abrsss

1

O que acontece no seu código é que você está capturando o name do seu botão, antes dele ser criado na arvore DOM. Para resolver isso, a sua Tag script deve ficar abaixo do botão.

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

Pode também, capturar o name dentro do método a ser chamado, isso resolve o problema

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

E pelo evento onload da sua janela.

<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>
1
  • Obrigado pela ajuda, acho que entendi o funcionamento da modo de carregamento do DOM. 1/07/2016 às 14:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .