Some thing is wrong. It is showing cannot read properties of null (addEventListener) on the console. please help. I have created an input field and a button. I am trying to get the value from the input field and going to put them in an array taskStorage.
'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>That is because addTaskBtn is null, and it's null because there is not element in you code with the id "addMoreBtn".
Either replace class="addMoreBtn" with id="addMoreBtn" or use document.querySelector('.addMoreBtn') to get the element as a class
Also remove .value from this line:
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>You need to provide "id attribute" to button instead of class.
and you need to change 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>