document.querySelector is not selecing the elements and throws ReferenceError: document is not defined

I would really appreciate the help. document.querySelector doesn't select the elements and throws ReferenceError: document is not defined - on vscode console, and Uncaught ReferenceError: input is not defined in the devtools console (that's the same problem cause "document.querySelector" is not selecting anything.) My script tag is at the end of the body tag. What could be causing the error?

const inputBox = document.querySelector('.inputField input');
const addBtn = document.querySelector('.inputField button');

inputBox.onkeyup = () => {
  let userData = inputBox.value;
  if (userData.trim() !== 0) {
    addBtn.classList.add("active");
  } else {
    addBtn.classList.remove("active");
  }
}

//if user click on the add button 
addBtn.onclick = () => {
  let userData = inputBox.value;
  let getLocalStorage = localStorage.getItem("New Todo");
  if (getLocalStorage == null) {
    listArr = [];
  } else {
    listArr = JSON.parse(getLocalStorage);
  }
  listArr.push(userData);
  localStorage.setItem("New Todo", JSON.stringify(listArr));
}

<!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>to-do-list</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
</head>

<body>
  <div class="wrapper">
    <header>Todo App</header>
    <div class="inputField">
      <input type="text" placeholder="Add here...">
      <button><span class="lnr lnr-plus-circle"></span></button>

    </div>
    <ul class="todolist">
      <li>Buy something new<span class="lnr lnr-trash"></span></li>
      <li>Buy something 2<span class="lnr lnr-trash"></span></li>
      <li>Buy something 3<span class="lnr lnr-trash"></span></li>
      <li>Buy something 4<span class="lnr lnr-trash"></span></li>
    </ul>
    <div class="footer">
      <span>You have 4 pending tasks</span>
      <button>Clear All</button>
    </div>
  </div>
  <script src="script.js">
  </script>
</body>

</html>

Solution

You are trying to reach input instead of inputBox. As well, listArr is not defined at all.

addBtn.onclick = () => {
  let userData = inputBox.value;
  let getLocalStorage = localStorage.getItem("Todos");
  let listArr = getLocalStorage !== null ? JSON.parse(getLocalStorage) : [];
  listArr.push(userData);
  localStorage.setItem("Todos", JSON.stringify(listArr));
}