2
respostas

aula editando no DOM

meu código da erro no console

let listaDeItens = []
let itemAEditar

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

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

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,
        checar: false
    })
    }

   itensInput.value = ''
}

function mostrarItem(){
    ulItens.innerHTML = ''
    ulItensComprados.innerHTML = ''
    listaDeItens.forEach((elemento,index)=>{
        if(elemento.checar){
        ulItensComprados.innerHTML += `
        <li class="item-compra is-flex is-justify-content-space-between" data-value="${index}">
            <div>
                <input type="checkbox" checked class="is-clickable" />  
                <span class="itens-comprados is-size-5">${elemento.valor}</span>
            </div>
            <div>
                <i class="fa-solid fa-trash is-clickable deletar"></i>
            </div>
        </li>
        `

        }else{
        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>
           <button onclick= "salvarEdicao()"><i class="fa-regular fa-floppy-disk is-clickable"></i></button> <i class="fa-regular is-clickable fa-pen-to-square editar"></i>
            <i class="fa-solid fa-trash is-clickable deletar"></i>
        </div>
        </li>
        `
        }
    })


const inputsCheck = document.querySelectorAll('input[type="checkbox"]')

inputsCheck.forEach(i=>{
    i.addEventListener('click',(evento)=>{
        const valorDoElemento = evento.target.parentElement.parentElement.getAttribute('data-value')
        listaDeItens[valorDoElemento].checar = evento.target.checked
        console.log(listaDeItens[valorDoElemento].checar)
        mostrarItem()
    })
})

const deletarObjetos = document.querySelectorAll(".deletar")
deletarObjetos.forEach(i=>{
    i.addEventListener('click',(evento)=>{
        const valorDoElemento = evento.target.parentElement.parentElement.getAttribute('data-value')
            listaDeItens.splice(valorDoElemento,1)
        mostrarItem()
    })
})

const editarItens = document.querySelectorAll(".editar")
editarItens.forEach(i=>{
    i.addEventListener('click',(evento)=>{
        itemAEditar = evento.target.parentElement.parentElement.getAttribute('data-value')
        mostrarItem()       
    })
})

}

function salvarEdicao(){
    const itemEditado = document.querySelector(`[data-value="${itemAEditar}"] input[type="text"]`)
    console.log(itemEditado.value)
}
2 respostas

Olá, Fábi.

Tudo bem?

Pelo código que você postou, não fica muito claro qual é o erro que está aparecendo no console. Seria possível fornecer mais informações sobre o erro?

De qualquer forma, notei que a função salvarEdicao() está vazia e não está fazendo nada. Talvez seja necessário adicionar o código necessário para editar o item selecionado.

Além disso, sugiro que você utilize o try...catch para tratar possíveis erros e evitar que o código pare de funcionar caso ocorra algum problema.

Espero ter ajudado e bons estudos!

este é o erro que da, ele acontece quando clicko no ícone de disquete

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