Estoy creando una lista de tareas pendientes simple para practicar la implementación. Cuando ejecuto mi código, aparece un error en la consola que dice... TypeError no detectado: no se pueden leer las propiedades de nulo (leyendo 'appendChild') en HTMLButtonElement.
El HTML se puede encontrar a continuación
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/To-Do-List/styles.css"> <title>To-Do List</title> </head> <body> <h1>To-Do List</h1> <div class="contianer"> <input id="inputField" type="text"><button id="addToDo">+</button> <div class="toDos" id="toDoContainer>"> </div> </div> <script src="/To-Do-List/script.js"></script> </body> </html>Este es el JavaScript que se ejecuta en la página...
let addToDoButton = document.getElementById('addToDo'); let toDoContainer = document.getElementById('toDoContainer'); let inputField = document.getElementById('inputField'); addToDoButton.addEventListener('click', function(){ var paragraph = document.createElement('p'); paragraph.classList.add('paragraph-stlying'); paragraph.innerText = inputField.value; toDoContainer.appendChild(paragraph); inputField.value = ""; paragraph.addEventListener('click', function() { paragraph.style.textDecoration = "line-through"; }) paragraph.addEventListener('dblclick', function() { paragraph.removeChild(); }) })Tengo problemas para ver qué está causando este error porque seguí un tutorial para crearlo. Mi código es idéntico al video que estaba viendo, pero no puedo obtener los mismos resultados.
Otro problema que he notado es que cuando hago clic en el botón para agregar algo a la lista, no se crea un elemento "p" en el DOM, que es lo que se esperaba.