Porque este script não funciona?

Front-end JavaScript
#1

Estava programando em JavaScript pelo notepad++ e não consigo executar o seguinte script:

var scarlet = document.getElementById(“scarlet”);
scarlet.style.color = “#FF0000”;

var indigo = document.getElementById(“indigo”);
indigo.style.backgroundColor = “#000066”;

O que tem de errado nele?
Só pra constar que existem dois elementos com os ids referidos! (indigo e scarlet)

#2

A sua tag <script> esta dentro da sua tag <head> ou antes da tag de fechamento da tag de fechamento do </body>?

Se tiver dentro da tag <head> pega a tag <script> e coloca antes da tag de fechamento do </body>.

#3

Coloca seu código aqui para entendermos melhor.

#4

Minha tag script estava dentro da tag head. Coloquei aqui antes da tag de fechamento body, como você disse e funcionou, obrigado mesmo! Mas por que não funcionou dentro da tag head?

#5

Quando o navegador lê o seu HTML ele começa pela primeira linha e depois vai pra segunda e assim por diante. Quando ele chega na linha que esta sua tag <script> responsável por carregar seu arquivo JavaScript, o que acontece é que o navegador para nessa linha do HTML e só volta nela após ler todo o seu JavaScript. Mas a primeira linha do JavaScript:

var scarlet = document.getElementById("scarlet");

está procurando um elemento dentro do document (documento HTML) com o ID scarlet. Que o navegador não leu ainda. Por este motivo não funcionou.

Entendeu man. Se você não entendeu não tem problema posso explicar de outra forma. :smile:
O importante é você entender.

#6

Entendi sim! Valeu!

#7

De boas man. Precisando posta dúvidas aí que a galera ajuda.

#8

Colaborando com o @MarcoBruno

Como você ainda não tem o elemento em tela para manipular, você pode usar a função ready() da API do jQuery.

    <!DOCTYPE html>
    <html lang="pt-br">
        <head>
            <script type="text/javascript">
                $(document).ready(function () {

                    var scarlet = document.getElementById("scarlet");
                    scarlet.style.color = "#FF0000";

                    var indigo = document.getElementById("indigo");
                    indigo.style.backgroundColor = "#000066";
                });
            </script>
        </head>
        
        <body>
            
            <!-- (corpo da pagina) -->

            <!-- Importando biblioteca jQuery -->
        	<script type="text/javascript" src="lib/jquery/jquery.min.js"></script>
            
        </body>
</html>

As rotinas dentro da função ready() somente serão executadas depois que todo o DOM for carregado, garantindo que qualquer coisa do HTML que queria ser manipulada já esteja presente. :wink:

Mais detalhes podem ser vistos aqui:
https://api.jquery.com/ready/