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