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

Duvida para editar compras

Boa noite, estou tentando resolver o problema da edição da lista de compras, porem sem sucesso. Queria entender onde está o erro e pq fica aparecendo a mensagem de "codigo suprimido" Insira aqui a descrição dessa imagem para ajudar na acessibilidade


let  ListaItem = []
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 comprasItens = itensInput.value
    const checar = ListaItem.some((elemento)=>elemento.valor.toUpperCase() === comprasItens.toUpperCase())

    if(checar){
        alert("Item cadastrado")
    } else{

    ListaItem.push({
        valor: comprasItens,
        check: false
    })

}
    itensInput.value = ''
}

function mostrarItem(){
    ulItens.innerHTML = ''
    ulItensComprados.innerHTML=''
    ListaItem.forEach((elemento,index)=>{
        if(elemento.check){
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>
       //código suprimido

       <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 inputCheck = document.querySelectorAll('input[type="checkbox"]')
    inputCheck.forEach(i=>{
        i.addEventListener('click', (evento)=>{
            const valorElemento = evento.target.parentElement.parentElement.getAttribute('data-value')
            ListaItem[valorElemento].check = evento.target.checked
            mostrarItem()
    })
    })

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

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

}
function salvarEdicao() {
    const itemEditado = document.querySelector(`[data-value"${ItemAEditar}" input[type="[text"]`)
    console.log(itemEditado.value)
}
1 resposta
solução!

Olá Christofferson! Tudo bem?

O problema está na forma como o querySelector está sendo utilizado na função salvarEdicao(). O erro "Failed to execute 'querySelector' on 'Document': '[data-value"undefined" input[type="[text"]' is not a valid selector" indica que o seletor não está sendo construído corretamente.

Você pode fazer a correção da função da seguinte forma:

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

Assim o seletor está corrigido de forma a selecionar o elemento corretamente. Agora, sobre a mensagem //código suprimido, ela aparece por que foi adicionada no else da função mostrarItem. Como ela foi colocada entre as crases, o javascript entende que ela é uma string e não um comentário, é só excluir que ela não vai mais aparecer no projeto.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado