I'm trying to create a function that adds my values from an input field to an array using the p-CodePudding

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 >
            <h3>To Do List</h3>
        </section>

        <section >
            <div >
                <input type="text" id='addTodoString1' placeholder="list your to do here">
            </div>
            <div >
                <button >
                    Add              
                </button>
            </div>
        </section>
    </section>

    <section id="result">
        <h3>results will display here. 

        </h3>
    </section>
    <script src="script.js"></script>
</body>
</html>

CodePudding user response：

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 >
            <h3>To Do List</h3>
        </section>

        <section >
            <div >
                <input type="text" id='addTodoString1' placeholder="list your to do here">
            </div>
            <div >
                <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>

CodePudding user response：

That is because addTaskBtn is null, and it's null because there is not element in you code with the id "addMoreBtn".

Either replace 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 >
            <h3>To Do List</h3>
        </section>

        <section >
            <div >
                <input type="text" id='addTodoString1' placeholder="list your to do here">
            </div>
            <div >
                <button >
                    Add              
                </button>
            </div>
        </section>
    </section>

    <section id="result">
        <h3>results will display here. 

        </h3>
    </section>
    <script src="script.js"></script>
</body>
</html>