代码之家 › 专栏 › 技术社区 › viboven

Javascript DOM未从ID检测到按钮,表示其为null[已关闭]

dom css html javascript

-3

viboven · 技术社区 · 2 年前

我为theodinproject工作,在做库项目时,我试图在按下按钮时访问我的每个表单值,然而,当试图在Javascript中定义元素时,它在网站控制台中说, 我假设错误是因为我隐藏了表单,并且只在单击按钮时显示它,表单包含错误的提交按钮。这是我的代码:

<!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">
  <link rel="stylesheet" href="./style.css">
  <script src="./script.js" defer></script>
  <title>Library</title>
</head>
<body>
  <div class="title">Library</div>
</body>
<div class="container">
  <div class="addBtn">
    <button id = 'add'>Add Book</button>
  </div>
  <div class="grid">
  </div>
  <div class="form" id = 'form'>
    <form>
      <div class="titleBook">
        <label for="bookTitle">Title</label>
        <br>
        <input type="text" id="bookTitle" required>
      </div>
      <div class="Author">
        <label for="bookAuthor">Author</label>
        <br>
        <input type="text" id="bookAuthor" required>
      </div>
      <div class="pages">
        <label for="bookPages">Num of Pages</label>
        <br>
        <input type="number" id="bookPages" required>
      </div>
      <div class="readCheck">
        <input type="checkbox" id="bookRead" name = 'isRead' value="read">
        <label for="bookRead">Read</label>
      </div>
      <div class="submit">
        <button type="submit" id ='submitBtn'>Submit</button>
      </div>
    </form>
  </div>
</div>
</html>

(忽略空类)

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.form {
  display: flex;
  justify-content: center;
  position: relative;
  top:15vh;
  height: 400px;
  display: none;
}
form{
  background-color: white;
  padding: 30px;
  border-radius: 15px;
}
form input{
  border: 2px black solid;
  border-radius: 25px;
  padding: 5px;
}
form div{
  margin-bottom: 30px;
}
form button{
  border: 1px solid lightgreen;
  border-radius: 25px;
  background-color: lightgreen;
  width:100px;
  height:35px;
  font-size: 1em;
}
.submit{
  display: flex;
  justify-content: center;
}

.title{
  display: flex;
  justify-content: center;
  font-size: 2.3em;
  background-color: white;
  align-items: center;
  height:10vh;
}
body{
  background-color: rgb(221, 221, 221);
}
.addBtn{
  display: flex;
  justify-content: center;
  align-items: center;
}
#add{
  background-color: lightblue;
  border: 2px solid lightblue;
  border-radius: 25px;
  width:10em;
  height:3em;
  font-size: 1em;
}
#add:hover{
  background-color: white;
  border: 2px solid white;
}
button:hover{
  cursor: pointer;
}
.container{
  width:75vw;
  position: relative;
  left: 15em;
  top:5em;
}

Javascript:

let addBtn = document.getElementById('add');
console.log(addBtn.textContent)
let form = document.getElementById('form')
let body = document.querySelector('body')
let bookTitle = document.querySelector('input#bookTitle').value;
let bookAuthor = document.querySelector('input#bookAuthor').value;
let bookPages = document.querySelector('input#bookPages').value;
let bookRead = document.querySelector('input#bookRead').value;
let submit = document.getElementById('submitBtn');
function Book() {
  this.title = bookTitle;
}
submit.addEventListener('click', () => {
  console.log('reached click');
})

function addBookToLibrary() {
}
addBtn.addEventListener('click', () => {
  form.style.display = 'flex';
})
window.addEventListener('keydown', (e) => {
  if (e.key == 'Escape'){
    form.style.display = 'none';
  }
})

除了提交事件侦听器之外,其他一切都正常工作, 感谢您的帮助

2 回复 | 直到 2 年前

-2

Rodolfo Rodriguez 2 年前

您是否在HTLM部分之前加载JS?如果JS是在HTML准备好之前加载的,这可能解释了为什么会出现这个问题。

尝试在外部脚本的末尾添加脚本尝试使用“延迟”

-3

Dogukan Aydin 2 年前

submit.addEventListener('click', function(evt){
    evt.preventDefault();
    console.log('reached click');
})