Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Estou com uma dúvida bem pertinente.

Nesse método de const, eu consigo fazer tudo direitinho conforme a aula, porém pensei em testar esse método com o código de desafio do módulo passado:

<head>
    <script src="rapariga2.js">
    </script>
</head>
<body>   
    <h1> Alura Fone </h1>
    <section class="teclado">
        <input  type="button" value="1">
        <input  type="button" value="2">
        <input  type="button" value="3">
        <input  type="button" value="4">
        <input  type="button" value="5">
        <input  type="button" value="6">
        <input  type="button" value="7">
        <input  type="button" value="8">
        <input  type="button" value="9">
        <input  type="button" value="*">
        <input  type="button" value="0">
        <input  type="button" value="#">
    </section>
  <input type="tel" placeholder="Digite seu telefone">
</body>

Ai quando eu vou fazer o document.querySelectorAll('') eu tentei colocar só input, só value, criei uma classe no html para esse teclado chamada: botoes e fiz o processo de selecionar todos, e todos os jeitos aparece a lista do NodeList dizendo que estão selecionados os botões, igualzinho na aula, só que isso dentro do DevTools, mas quando vou fazer isso no javascript no editor de código, e reproduzo o: const listaDeNumeros = document.querySelector('ai coloco todas formas que tentei citadas acima') e depois vou no DevTools e coloco o nome da constante criada: listaDeNumeros, o NodeList diz que não tem nada dentro da lista, e não estou conseguindo resolver este problema.

código do javaScript:

const listaDeTeclas = document.querySelectorAll('.teclado .botoes');
2 respostas
solução!

Oi Alan, tudo bem? Vi que estás colocando o script na tag <head>. O JS é uma linguagem interpretada, então basicamente ela é lida e interpretada a todo momento, e como o script está antes dos inputs, ele não consegue encontrar inputs porque eles ainda não foram carregados.

Caso queira deixar na <head>, podes utilizar o atributo defer que basicamente vai executar o script após tudo estar renderizado:

<head>
    <script src="rapariga2.js" defer></script>
</head>

Mas a forma que mais utilizamos é colocar o script antes do fechamento da tag </body>:

...

      <script src="rapariga2.js"></script>
</body>

E caso queira utilizar:

const listaDeTeclas = document.querySelectorAll('.teclado .botoes');

deves colocar uma classe .botoes nos seus inputs.

Espero ter ajudado, qualquer coisa é só avisar!

Bons estudos ^^

Era isso mesmo, o problema estava na tag script, eu nem sabia dessa do "defer". E tamém achei que ela tinha que ficar no head, por ter que linkar ela com o html.