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

Question

非常感谢您的帮助。 document.querySelector 没有 select 元素并抛出 ReferenceError: document is not defined - on vscode控制台，和 Uncaught ReferenceError: input is not defined in the devtools console（这是同样的问题，因为“document.querySelector”不是 selecting 任何东西。）我的脚本标签位于 body 标签的末尾。可能导致错误的原因是什么？

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>

Answer 1

您正试图达到 input 而不是 inputBox。同样，listArr 根本没有定义。

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));
}

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

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

javascript

html

document

queryselector