Uncaught Type Error

console.log("Welcome to Notes Taking Website");

// If user adds a note, add it to the local Storage

let addBtn = document.getElementById('addBtn');
addBtn.addEventListener("click", function(e){
    let addTxt = document.getElementById('addTxt');
    let notes = localStorage.getItem("notes");
    if (notes == null){
        notesObj = [];
    else {
        notesObj = JSON.parse(notes);
    localStorage.setItem("notes", JSON.stringify(notesObj));


Where am I committing the mistake? It is returning an error

Uncaught TypeError: Cannot read property ‘push’ of null
at HTMLButtonElement. (app.js:15)

Either localStorage is returing null or the notesObj is not defined

I cant see where you declared notesObj. You’re trying to push to an array that doesn’t exist. It might be another part of your code.

Also push() is an array method and you are using it on an object.

This is the html part

<!DOCTYPE html>
<html lang="en">

    <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>Notes App</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">


    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Magic Notes</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                <form class="d-flex">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>

    <div class="container my-3">
        <h1>Welcome to Gadget Notes</h1>
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Add a Note</h5>
                <div class="form-group">
                    <textarea class="form-control" id="addTxt" rows="3"></textarea>
                <button class="btn btn-primary my-3" id="addBtn">Add Note</button>

        <h1 class="my-3">Your Notes</h1>
        <div id="notes" class="row container-fluid">
            <div class="noteCard my-2 mx-2 card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">Note</h5>
                    <p class="card-text"></p>
                    <a href="#" class="btn btn-primary">Delete Note</a>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
    <script src="js/app.js"></script>


You should add the event listener to the form not the button using the submit event.

Make sure to use e.preventDefault() as the first line of your callback function.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.