Erro Uncaught TypeError: Cannot read properties of null (reading 'appendChild') | JavaScript: construindo páginas dinâmicas

3
respostas

Referente ao curso JavaScript: construindo páginas dinâmicas, no capítulo Modularizando o código e atividade Lista vazia

por Gustavo Rodrigues Lopes

| 55.5k xp | 32 posts

Meu código abaixo:

const inputItem = document.getElementById("input-item")
const listaDeCompras = document.getElementById("lista-de-compras");
const botaoAdicionar = document.getElementById("adicionar-item");
let contador = 0;

botaoAdicionar.addEventListener("click", (evento) => {
    evento.preventDefault();
    if (inputItem.value === "") {
        alert("Por favor, insira um item!");
        return
    }

    const itemDaLista = document.createElement("li");
    const containerItemDaLista = document.createElement("div");
    containerItemDaLista.classList.add("lista-item-container");
    const inputCheckbox = document.createElement("input");
    inputCheckbox.type = "checkbox";
    inputCheckbox.id = "checkbox-" + contador++;
    const nomeItem = document.createElement("p");
    nomeItem.innerText = inputItem.value;

    inputCheckbox.addEventListener('click',function() {
        if(inputCheckbox.checked){
            nomeItem.style.textDecoration= 'line-through'
        }
        else{
            nomeItem.style.textDecoration= 'none'
        }

    })

    containerItemDaLista.appendChild(inputCheckbox);
    containerItemDaLista.appendChild(nomeItem);

    itemDaLista.appendChild(containerItemDaLista)
    
    const diaDaSemana= new Date().toLocaleDateString('pt-BR',{
        weekday: 'long'})
    const data= new Date().toLocaleDateString('pt-BR')
    const horario= new Date().toLocaleTimeString('pt-BR',{
        hour: 'numeric',
        minute: 'numeric'})
    const dataCompleta= `${diaDaSemana} (${data}) ás ${horario}`
    const itemData = document.createElement('p')
    itemData.innerText = dataCompleta
    itemData.classList.add('texto-data')
    itemDaLista.appendChild(itemData)

    listaDeCompras.appendChild(itemDaLista)

    verificarListaVazia();

})

const mensagemListaVazia = document.querySelector('.mensagem-lista-vazia');
console.log(mensagemListaVazia)

function verificarListaVazia(){
    const itensDaListaVazia = listaDeCompras.querySelector('li');
    if(itensDaListaVazia.length == 0){
        mensagemListaVazia.style.display = 'block';

    }else{
        mensagemListaVazia.style.display = 'none'
    }
}

verificarListaVazia();

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lista de Compras</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&family=Numans&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./styles.css" />
  </head>

  <body>
    <main>
      <img src="./img/bag.png" alt="sacola de compras" />
      <form>
        <input
          class="input-item"
          id="input-item"
          type="text"
          placeholder="Digite o item que deseja adicionar"
        />
        <button class="button-item" id="adicionar-item" type="button">Salvar item</button>
      </form>

      <div class="container-lista">
        <h2>Lista de compras</h2>
        <hr />
        <li>
        <id="lista-de-compras">
          <p class="mensagem-lista-vazia">Não há nenhum item na lista no momento</p>
        </li>
        </ul>
      </div>
    </main>
    <script defer src="index.js"></script>
  </body>
</html>

3 respostas

por Ronaldo Cordeiro Schmidt

| 134.2k xp | 395 posts

3 dias atrás

Olá amigo.
Tudo bem?
O erro está nesta linha no html:

 <li>
        <id="lista-de-compras">// erro aqui!
          <p class="mensagem-lista-vazia">Não há nenhum item na lista no momento</p>
        </li>

Corrija para:

 <li>
        <ul id="lista-de-compras">
              <p class="mensagem-lista-vazia">Não há nenhum item na lista no momento</p>
        </ul>
</li>

Teste ai e avise nos comentarios.
Bons estudos.

por Gustavo Rodrigues Lopes

| 55.5k xp | 32 posts

2 dias atrás

O erro foi corrigido entretanto outro erro apareceu:
criarItemDaLista:1 Failed to load resource: the server responded with a status of 404 (Not Found)
Aqui está o código deste arquivo:

const inputItem = document.getElementById("input-item")
export function criarItemDaLista(){
    evento.preventDefault();
    if (inputItem.value === "") {
        alert("Por favor, insira um item!");
        return
    }


    const itemDaLista = document.createElement("li");
    const containerItemDaLista = document.createElement("div");
    containerItemDaLista.classList.add("lista-item-container");
    const inputCheckbox = document.createElement("input");
    inputCheckbox.type = "checkbox";
    inputCheckbox.id = "checkbox-" + contador++;
    const nomeItem = document.createElement("p");
    nomeItem.innerText = inputItem.value;

    inputCheckbox.addEventListener('click',function() {
        if(inputCheckbox.checked){
            nomeItem.style.textDecoration= 'line-through'
        }
        else{
            nomeItem.style.textDecoration= 'none'
        }

    })

    containerItemDaLista.appendChild(inputCheckbox);
    containerItemDaLista.appendChild(nomeItem);

    itemDaLista.appendChild(containerItemDaLista)
    
    const diaDaSemana= new Date().toLocaleDateString('pt-BR',{
        weekday: 'long'})
    const data= new Date().toLocaleDateString('pt-BR')
    const horario= new Date().toLocaleTimeString('pt-BR',{
        hour: 'numeric',
        minute: 'numeric'})
    const dataCompleta= `${diaDaSemana} (${data}) ás ${horario}`
    const itemData = document.createElement('p')
    itemData.innerText = dataCompleta
    itemData.classList.add('texto-data')
    itemDaLista.appendChild(itemData)

    listaDeCompras.appendChild(itemDaLista)
}

por Ronaldo Cordeiro Schmidt

| 134.2k xp | 395 posts

2 dias atrás

Ola amigo.
Fiz uma analise completa no seu código e fiz o minimo de alteraçoes para que ficasse conforme o original.
Teste ai e faça as comparaçoes.


const adicionarItem = document.getElementById("adicionar-item");
const inputItem = document.getElementById("input-item");
const listaDeCompras = document.getElementById("lista-de-compras");
const listaVazia = document.getElementById("lista-vazia");
let contador = 0;


function criarItemDaLista(){
    listaVazia.textContent = "";
    const itemDaLista = document.createElement("li");
    const inputCheckbox = document.createElement("input");
    const containerItemDaLista = document.createElement("div");
    const nomeItem = document.createElement("p");

    containerItemDaLista.classList.add("lista-item-container");
   
    inputCheckbox.type = "checkbox";
    inputCheckbox.id = "item-" + contador;
    console.log(inputCheckbox.id);
    
    nomeItem.innerText = `${inputCheckbox.id} - ` + inputItem.value;

    inputCheckbox.addEventListener('click',function() {
        if(inputCheckbox.checked){
            nomeItem.style.textDecoration= 'line-through'
        }
        else{
            nomeItem.style.textDecoration= 'none'
        }

    })

    containerItemDaLista.appendChild(inputCheckbox);
    containerItemDaLista.appendChild(nomeItem);

    itemDaLista.appendChild(containerItemDaLista)
    
    const diaDaSemana= new Date().toLocaleDateString('pt-BR',{
        weekday: 'long'})
    const data= new Date().toLocaleDateString('pt-BR')
    const horario= new Date().toLocaleTimeString('pt-BR',{
        hour: 'numeric',
        minute: 'numeric'})
    const dataCompleta= `${diaDaSemana} (${data}) ás ${horario}`
    const itemData = document.createElement('p')
    itemData.innerText = dataCompleta
    itemData.classList.add('texto-data')
    itemDaLista.appendChild(itemData)

    listaDeCompras.appendChild(itemDaLista)
    inputItem.value = ""; // limpa o campo
}
adicionarItem.addEventListener('click', ()=>{
     if (inputItem.value === "") {
        alert("Por favor, insira um item!");
        return
    }else{
        contador++;
        criarItemDaLista();
       
    }
});

Seu código tem muito potencial para expansões e melhorias.
Confere ai e manda um feedback.
Obrigado e bons estudos.
Observação: editei algumas vezes este tópico com o intuito de dar uma resposta simples e facil de entender.

Garanta sua matrícula hoje e ganhe + 2 meses grátis