Quiero crear mi propia lista de tareas pendientes con JavaScript y localStorage. Después de escribir la entrada y presionar el botón Enviar, el elemento se agregará y se mostrará en la pantalla. Aparecerá un botón de verificación junto al elemento. Después de presionar el botón de verificación, quiero que se agregue la clase. Quiero agregar css (opacidad, línea...). Pero cuando presiono un botón de verificación, la consola muestra este error: TypeError no detectado: no se pueden leer las propiedades de undefined (leyendo 'agregar') al verificar (app.js:23) en HTMLElement.onclick (index.html:30)
Código HTML:
<body> <div class="main"> <input id="item" type="text"> <i id="addItem" class="fas fa-plus"></i><br> <br> </div> <div class="items"> <div id="addedItems"></div> </div> <i onclick='deleteAll()' class="fas fa-trash"></i> </body>Código JS:
const item = document.getElementById("item"); const add = document.getElementById("addItem"); const addedItems = document.getElementById("addedItems"); add.onclick = function() { const itemValue = item.value; const itemValue2 = ' '; if (itemValue && itemValue2) { localStorage.setItem(itemValue, itemValue2); location.reload(); } }; for (let a = 0; a < localStorage.length; a++) { const itemValue = localStorage.key(a); addedItems.innerHTML += `<div class= 'text'> <div>${itemValue}</div> <div> <i onclick='check("${itemValue}")' class="fas fa-check"></i><i onclick='deleteItem("${itemValue}")' class="fas fa-trash-alt"></i> </div></div> <br>`; } function check(itemValue) { itemValue.classList.add("mystyle"); } function deleteItem(itemValue) { localStorage.removeItem(itemValue); location.reload(); } function deleteAll() { localStorage.clear(); location.reload(); }Puedes probar esta respuesta:
<script> const item = document.getElementById("item"); const add = document.getElementById("addItem"); const addedItems = document.getElementById("addedItems"); add.onclick = function() { const itemValue = item.value; const itemValue2 = ' '; if (itemValue && itemValue2) { localStorage.setItem(itemValue, itemValue2); location.reload(); } }; for (let a = 0; a < localStorage.length; a++) { const itemValue = localStorage.key(a); addedItems.innerHTML += `<div class= 'text'> <div>${itemValue}</div> <div> <i onclick='check("${itemValue}", ${a})' class="fas fa-check" id="${a}"></i><i onclick='deleteItem("${itemValue}")' class="fas fa-trash-alt"></i> </div></div> <br>`; } function check(itemValue, id) { const elem = document.getElementById(id); elem.classList.add("mystyle"); } function deleteItem(itemValue) { localStorage.removeItem(itemValue); location.reload(); } function deleteAll() { localStorage.clear(); location.reload(); } </script> <div class="main"> <input id="item" type="text"> <i id="addItem" class="fas fa-plus"></i><br> <br> </div> <div class="items"> <div id="addedItems"></div> </div> <i onclick='deleteAll()' class="fas fa-trash"></i> Solo los cambios que hice son pasar la id del elemento para hacer clic en la casilla de verificación junto con el elemento itemValue . Valor que está pasando el valor de la casilla de verificación, no el elemento del documento. Si te consolas, sabrás que itemValue es solo una cadena, no un elemento DOM.
Aquí está el violín: https://jsfiddle.net/aviboy2006/ortqu1ps/