[Aula 30] Não aparece o estilo

anarsantos commented 6 months ago

Não aparece o quadrado amarelo como no seu vídeo.

(function () {
    'use strict';

    var $div = document.querySelector('div');
    $div.style.width = '100px';
    $div.style.height = '100px';
    $div.style.background = '#fc0';

  })();

@fdaciuk

fdaciuk commented 6 months ago

Oi @anarsantos! Esse erro normalmente acontece quando o elemento não existe no HTML.

Como está seu HTML?

anarsantos commented 6 months ago

Eu super confiante que o html tá ok nem coloquei aqui. É muita autoconfiança para uma inciante rsrs aff

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS</title>
</head>
<body>  

  <script src="js/main.js"></script>
</body>
</html>

fdaciuk commented 6 months ago

hahah! O problema é exatamente esse. Tá vendo que você não tem uma div no seu HTML? Quando você tenta usar o querySelector com um elemento que não existe, ele vai retornar null ao invés do objeto que faz referência àquele nó do DOM.

Foi o que aconteceu no seu erro: Cannot read properties of null (reading 'style').

O erro diz que não é possível ler propriedades de null, e também mostra que ele tentou ler a propriedade style.

A primeira linha do seu código que tenta ler a propriedade style de um objeto é:

$div.style.width = '100px';

Isso significa que $div é o valor null que foi mencionado no erro. E essa variável só recebeu null porque nenhum nó do DOM casa com o seletor que você usou.

Ao criar uma div vazia no seu HTML, seu código vai funcionar como esperado =)

anarsantos commented 6 months ago

Que coisa né seu professor, iniciantes fazem cada coisa aff rs. Quando você dá as instruções parece tão óbvio, como não vi rs.

fdaciuk commented 6 months ago

Boa! haha :D Passar por esses erros vai te fazer entender melhor os problemas. Faz parte do processo =)

da2k / curso-javascript-ninja

[Aula 30] Não aparece o estilo #10237