Uncaught TyperError: Cannot read properties of null (reading 'value') at HTMLFormElement.addItem (app.js:21:25)

I was trying to create a crud app(local storage) from a Udemy course and ran into the following error in the code, the event Listener is to get the value in the input section once user hits submit;

following is the app.js

// ****** SELECT ITEMS **********
const alert = document.querySelector(".alert");
const form = document.querySelector(".grocery-form");
const grocery = document.getElementById(".grocery");
const submitBtn = document.querySelector(".submit-btn");
const container = document.querySelector(".grocery-container");
const list = document.querySelector(".grocery-list");
const clearBtn = document.querySelector(".clear-btn");

// edit option
let editElement;
let editFlag = false;
let edtiID = "";

// ****** EVENT LISTENERS **********
form.addEventListener("submit", addItem);

// ****** FUNCTIONS **********
function addItem(e) {
  e.preventDefault();
  const value = grocery.value;
  const id = new Date().getTime().toString();
  console.log(id);
}

following is the index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Grocery Bud</title>
    <!-- font-awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
    />
    <!-- styles -->
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <section class="section-center">
      <!-- form -->
      <form class="grocery-form">
        <p class="alert"></p>
        <h3>grocery bud</h3>
        <div class="form-control">
          <input type="text" id="grocery" placeholder="e.g. eggs" />
          <button type="submit" class="submit-btn">submit</button>
        </div>
      </form>
      <!-- list -->
      <div class="grocery-container">
        <div class="grocery-list"></div>
        <button class="clear-btn">clear items</button>
      </div>
    </section>
    <!-- javascript -->
    <script src="app.js"></script>
  </body>
</html>

I tried to listen to the submit event and capture the value in the input box in the form. But I got the error value is null, also tried to console log the 'grocery' element, got null instead

Solution

grocery is an ID not class, so document.getElementById needs a plain ID just like grocery not .grocery, this would be called class. Just read about Document.getElementById().

// ****** SELECT ITEMS **********
const alert = document.querySelector(".alert");
const form = document.querySelector(".grocery-form");
const grocery = document.getElementById("grocery");
const submitBtn = document.querySelector(".submit-btn");
const container = document.querySelector(".grocery-container");
const list = document.querySelector(".grocery-list");
const clearBtn = document.querySelector(".clear-btn");

// edit option
let editElement;
let editFlag = false;
let edtiID = "";

// ****** EVENT LISTENERS **********
form.addEventListener("submit", addItem);

// ****** FUNCTIONS **********
function addItem(e) {
  e.preventDefault();
  const value = grocery.value;
  const id = new Date().getTime().toString();
  console.log(id);
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Grocery Bud</title>
        <!-- font-awesome -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
        <!-- styles -->
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <section class="section-center">
            <!-- form -->
            <form class="grocery-form">
                <p class="alert"></p>
                <h3>grocery bud</h3>
                <div class="form-control">
                    <input type="text" id="grocery" placeholder="e.g. eggs" />
                    <button type="submit" class="submit-btn">submit</button>
                </div>
            </form>
            <!-- list -->
            <div class="grocery-container">
                <div class="grocery-list"></div>
                <button class="clear-btn">clear items</button>
            </div>
        </section>
    </body>
</html>

Or as @Andy mentioned in comments, you can use Document.querySelector().