Algo está mal. Muestra que no se pueden leer las propiedades de nulo (addEventListener) en la consola. por favor ayuda. He creado un campo de entrada y un botón. Estoy tratando de obtener el valor del campo de entrada y los pondré en una matriz de almacenamiento de tareas.
'use strict' let taskStorage = []; // input declarations const field = document.getElementById('addTodoString1').value; const addTaskBtn = document.getElementById('addMoreBtn'); addTaskBtn.addEventListener('click', ()=> { taskStorage.push(field.value); console.log(taskStorage); }) <!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"> <title>Palmdale To Do</title> <link rel="stylesheet" href="style/landscape.css"> </head> <!-- create a to do list --> <!-- create an empty array --> <!-- push items to an array using shift --> <body> <section id='main'> <section class="header"> <h3>To Do List</h3> </section> <section class="inputFieldSection"> <div class="inputsFieldBox"> <input type="text" id='addTodoString1' placeholder="list your to do here"> </div> <div class="btnBox"> <button class="addMoreBtn"> Add </button> </div> </section> </section> <section id="result"> <h3>results will display here. </h3> </section> <script src="script.js"></script> </body> </html>Esto se debe a que addTaskBtn es nulo, y es nulo porque no hay ningún elemento en su código con el id "addMoreBtn".
Reemplace class="addMoreBtn" con id="addMoreBtn" o use document.querySelector('.addMoreBtn') para obtener el elemento como una clase
También elimine .value de esta línea:
const field = document.getElementById('addTodoString1').value; 'use strict' let taskStorage = []; // input declarations const field = document.getElementById('addTodoString1'); const addTaskBtn = document.querySelector('.addMoreBtn'); addTaskBtn.addEventListener('click', ()=> { taskStorage.push(field.value); console.log(taskStorage); }) <!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"> <title>Palmdale To Do</title> <link rel="stylesheet" href="style/landscape.css"> </head> <!-- create a to do list --> <!-- create an empty array --> <!-- push items to an array using shift --> <body> <section id='main'> <section class="header"> <h3>To Do List</h3> </section> <section class="inputFieldSection"> <div class="inputsFieldBox"> <input type="text" id='addTodoString1' placeholder="list your to do here"> </div> <div class="btnBox"> <button class="addMoreBtn"> Add </button> </div> </section> </section> <section id="result"> <h3>results will display here. </h3> </section> <script src="script.js"></script> </body> </html>Debe proporcionar el "atributo de identificación" al botón en lugar de la clase.
y necesita cambiar const field = document.getElementById('addTodoString1').value ; to const field = document.getElementById('addTodoString1');
let taskStorage = []; // input declarations const field = document.getElementById('addTodoString1'); const addTaskBtn = document.getElementById('addMoreBtn'); addTaskBtn.addEventListener('click', ()=> { taskStorage.push(field.value); console.log(taskStorage); }) <!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"> <title>Palmdale To Do</title> <link rel="stylesheet" href="style/landscape.css"> </head> <!-- create a to do list --> <!-- create an empty array --> <!-- push items to an array using shift --> <body> <section id='main'> <section class="header"> <h3>To Do List</h3> </section> <section class="inputFieldSection"> <div class="inputsFieldBox"> <input type="text" id='addTodoString1' placeholder="list your to do here"> </div> <div class="btnBox"> <button id="addMoreBtn"> Add </button> </div> </section> </section> <section id="result"> <h3>results will display here. </h3> </section> <script src="script.js"></script> </body> </html>