Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Projeto] tag strong não aparece apos atualizaçao via formulario

Strong nao aparece depois de atualizar ao fazer o submit

const form = document.getElementById("novoItem")
const lista = document.getElementById('lista')
const itens = JSON.parse(localStorage.getItem("itens")) || []

itens.forEach(elemento => {
    criaElemento(elemento)
});
form.addEventListener('submit', (evento)=>{
    evento.preventDefault()

    const nome = evento.target.elements['nome']
    const quantidade = evento.target.elements['quantidade']

    const existe = itens.find(elemento => elemento.nome === nome.value)

    const itemAtual = {
        'nome':nome.value,
        'quantidade':quantidade.value
    }

    if (existe){
        itemAtual.id = existe.id
        atualizaElemento(itemAtual)
        itens[existe.id] = itemAtual
    }else{
        itemAtual.id = itens.length
        criaElemento(itemAtual)
        itens.push(itemAtual)
    }


    localStorage.setItem('itens' , JSON.stringify(itens))
     
    nome.value = ""
    quantidade.value = ""
})

function criaElemento(item){
    const novoItem = document.createElement('li')
    novoItem.classList.add('item')

    const numeroItem = document.createElement('strong')
    numeroItem.innerHTML = item.quantidade
    novoItem.dataset.id = item.id
    novoItem.appendChild(numeroItem)

    novoItem.innerHTML += item.nome

    lista.appendChild(novoItem)


}
function atualizaElemento(item){
    document.querySelector("[data-id='"+item.id+"']").innerHTML = item.quantidade + item.nome;
}

Ao apertar f5 volta ao normal mas na hora de fazer submit nao aparece

1 resposta
solução!

Olá, Tharlison! Tudo bem?

Pelo que pude perceber no seu código, você está criando o elemento "strong" para a quantidade do item, mas na hora de atualizar o elemento, você está sobrescrevendo o conteúdo do elemento com a quantidade e o nome do item juntos, sem o "strong".

Para corrigir isso, você pode atualizar a função "atualizaElemento" para que ela crie novamente o elemento "strong" e adicione o nome do item depois dele. Ficaria assim:

function atualizaElemento(item){
    const elemento = document.querySelector("[data-id='"+item.id+"']")
    elemento.innerHTML = ""
    const numeroItem = document.createElement('strong')
    numeroItem.innerHTML = item.quantidade
    elemento.appendChild(numeroItem)
    elemento.innerHTML += item.nome;
}

Espero que isso ajude a resolver o seu problema! Se ainda tiver alguma dúvida, é só perguntar.

Espero ter ajudado e bons estudos!