1
resposta

[Dúvida] O console está dando um erro

Quando eu tento rodar essa parte do código da aula:

const inputsCheckbox = document.querySelectorAll('input[type="checkbox"]');
    inputsCheckbox.forEach(i => {
        i.addEventListener('click', () => {
            console.log(evento.target.parentElement.parentElement.getAttribute('data-value'));
        })
    })

Aparece esse erro no console: Uncaught ReferenceError: evento is not defined at HTMLInputElement. (main.js:49:25) (anonymous) @ main.js:49

Além do erro, ele não aparece as informações desejadas no console do navegador. O que está dando errado no meu código? Código completo do main.js:

`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();
    salvarItens();
    mostrarItem();
})

function salvarItens() {
    const comprasItem = itensInput.value;
    const checarItemDuplicado = listaDeItens.some((elemento) => elemento.valor.toUpperCase() === comprasItem.toUpperCase());

    if(checarItemDuplicado) {
        alert('Item já existe na lista!');
    } else {
        listaDeItens.push({
            valor: comprasItem
        });
    }

    console.log(listaDeItens);
    
}

function mostrarItem() {
    ulItens.innerHTML = '';

    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>
`
})

const inputsCheckbox = document.querySelectorAll('input[type="checkbox"]');
inputsCheckbox.forEach(i => {
    i.addEventListener('click', () => {
        console.log(evento.target.parentElement.parentElement.getAttribute('data-value'));
    })
})

} ` ```

1 resposta

Oi Mylena! Como vai?

Parece que você encontrou um pequeno erro no seu código. O problema está na função de callback do addEventListener. No seu código, você está tentando acessar o evento sem tê-lo definido. Isso acontece porque a função de callback não está recebendo o parâmetro evento.

Para corrigir isso, você precisa passar o evento como um parâmetro na sua função de callback:

inputsCheckbox.forEach(i => {
    i.addEventListener('click', (evento) => {  // evento foi passado entre os parênteses
        console.log(evento.target.parentElement.parentElement.getAttribute('data-value'));
    })
})

Ao fazer essa alteração, o evento será corretamente definido e você poderá acessar o target e seus elementos pai sem problemas.

Conte com o apoio do fórum :)

Um abraço e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!