Por que o meu Javascript e JQuery script não está funcionando?

votos
2

Eu estava olhando para outra pergunta e viu que tinha sido dito, quando o Javascript não estava funcionando, para colocar uma função que começou no carregamento da página.

Eu estava tentando usar este código: (bem, não exatamente este código, mas algo parecido)

<!DOCTYPE html>
<html>
    <head>
        <script src=https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>
        <script type=text/javascript charset=utf-8>
function doThisWhenLoaded(){
    var code = document.getElementsByTagName(body);
    code.append(<p>Yes it did.</p>);
}
        </script>
    </head>
    <body onload=doThisWhenLoaded>
        <h1 style=font-family:sans-serif;>Did it work?</h1>
    </body>
</html>

E nada aconteceu. Tudo o que ele fez foi mostrar o código h1 que eu coloquei lá dentro.

Publicado 27/11/2018 em 18:01
fonte usuário
Em outras línguas...                            


3 respostas

votos
2

Desde que você já está incluindo jQuery tentar este

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript" charset="utf-8">
$(document).ready(function(){
    var code = $("body");
    code.append("<p>Yes it did.</p>");
});
        </script>
    </head>
    <body >
        <h1 style="font-family:sans-serif;">Did it work?</h1>
    </body>
</html>

Respondeu 27/11/2018 em 18:05
fonte usuário

votos
2

Você se esqueceu de incluir o parêntese para chamar a função no bodyelemento onloadatributo:

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" charset="utf-8">
    function doThisWhenLoaded() {
      //Modified the two lines below slightly
      var code = document.querySelector("body");
      code.innerHTML += "<p>Yes it did.</p>";
    }
  </script>
</head>

<body onload="doThisWhenLoaded()">
  <h1 style="font-family:sans-serif;">Did it work?</h1>
</body>

</html>

Uma maneira melhor / mais limpo para conseguir a mesma coisa seria usar addEventListenere DOMContentLoadedevento. Algo como a seguir:

document.addEventListener("DOMContentLoaded", appendHtml.call(null, {
  selector: 'body',
  html: '<p>Yes it did.</p>'
}));

function appendHtml(config) {
  document.querySelector(config.selector).innerHTML += config.html;
}
<h1 style="font-family:sans-serif;">Did it work?</h1>

Respondeu 27/11/2018 em 18:04
fonte usuário

votos
1

Dois razão pela qual ele não funciona:

  • Para selecionar o bodyque você tem que usar document.bodyou $("body")(em jQuery)
  • E você esqueceu de acrescentar parênteses à sua chamada de função doThisWhenLoaded()

Aqui está o código corrigido:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript" charset="utf-8">
function doThisWhenLoaded(){
    $("body").append("<p>Yes it did.</p>");
}
        </script>
    </head>
    <body onload="doThisWhenLoaded()">
        <h1 style="font-family:sans-serif;">Did it work?</h1>
    </body>
</html>

Respondeu 27/11/2018 em 18:05
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more