Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Por que minha aplicação não acrescenta nenhum item à "Lista de Compras"?

Referente ao curso JavaScript: manipulando objetos, no capítulo Métodos e escopo léxico e atividade Definindo métodos

por Estudante
| 9.6k xp | 2 posts

Já conferí o código várias vezes, parece certo, mas não acrescenta nada a "Lista de Compras" Grata!

let listaDeItens = []

const form = document.getElementById("form-itens") const itensInput = document.getElementById("receber-item") const ulItens = document.getElementById("lista-de-itens")

form.addEventListener("submit", function(evento){ evento.preventDefault() salvarItem() mostrarItem() })

function salvarItem(){ const comprasItem = itensInput.value const checarDuplicado = listaDeItens.some((elemento) => elemento.valor.toUpperCase() === comprasItem.toUpperCase())

if(checarDuplicado){
    alert("item já existe")
}else{
listaDeItens.push( {
    valor:comprasItem
    })
}
console.log(listaDeItens)

}

function mostrarItem(){ ulItens.innerHTML = ''

listaDeItens.forEach((elemento,index) => {
    ulItens.innerHTLM += `
        <li class="item-compra is-flex is-justify-content-space-between" data-value="${index}">
            <div>
                <input type="checkbox" class="is-clickable" />
                <input type="text" class="is-size-5" value="${elemento.valor}"></input>
            </div>
            <div>
                <i class="fa-solid fa-trash is-clickable deletar"></i>
            </div>
        </li>
   `
})

} Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas
solução!
por Luis Dias
| 3235.2k xp | 3556 posts
Developer PHP (⌐■_■)

Oi Estudante,

Analisando seu código, identifiquei um pequeno erro na função mostrarItem. 😊

Você utilizou ulItens.innerHTLM +=, o correto é ulItens.innerHTML +=.

A diferença é que innerHTML sobrescreve o conteúdo existente, enquanto innerHTLM (com "T" faltando) não é um atributo válido, causando o problema de não exibir os itens na lista.

function mostrarItem(){
  ulItens.innerHTML = ''; // Limpa a lista antes de adicionar os itens

  listaDeItens.forEach((elemento, index) => {
    ulItens.innerHTML += `
      <li class="item-compra is-flex is-justify-content-space-between" data-value="${index}">
        <div>
          <input type="checkbox" class="is-clickable" />
          <input type="text" class="is-size-5" value="${elemento.valor}"></input>
        </div>
        <div>
          <i class="fa-solid fa-trash is-clickable deletar"></i>
        </div>
      </li>
    `;
  });
}

Além disso, é uma boa prática limpar o conteúdo da ul antes de adicionar novos itens, como demonstrado no código acima. 👍

🎓 Para saber mais: Documentação sobre innerHTML

Espero que isso resolva seu problema! 🤔

Continue praticando e explorando o mundo da programação!

tux matrix Caso este post o tenha ajudado, marque-o como solucionado ☑️. Bons Estudos! 🤓
por Estudante
| 9.6k xp | 2 posts

Obrigada muito pela atenção. Pior é que eu olho, olho e olho e não enxergo, acredita que precisei procurar o "HTLM" errado pelu ctrl+L porque não conseguia energar? ....afffff....... Muito obrigada!