能够在 javascript 中访问 dom 元素，而无需为其显式定义查询选择器

问题描述 投票：0回答：1

在我的代码中，我正在制作一个简单的图书馆应用程序，并且由于某种原因，在我的javaScript代码中，未经检查，我假设我已经通过变量名read为添加书籍按钮弹出中的复选框输入定义了一个查询选择器-up 菜单，但是我没有，然后我在我的 **提交和取消事件侦听器 ** 中引用了它，并且没有错误。我很困惑为什么会发生这种情况，因为我相信元素无法被访问，除非您使用定义的文档方法之一选择它们，例如查询选择器()

HTML

<!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>Javascript Library</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- popup form -->
  <div class="popup-form">
    <button class="cancel">x</button>
    <form class="form">
      <ul>
        <li>
          <label for="title">Title*</label>
          <input type="text" id="title" required>
        </li>
        <li>
          <label for="author">Author*</label>
          <input type="text" id='author' required>
        </li>
        <li>
          <label for="pages">Pages*</label>
          <input type="number" id="pages" min="0" required>
        </li>
        <li>
          <label for="read">Read</label>
          <input type="checkbox" id = 'read'>
        </li>
        <button type='button' class="submit">Submit</button>
      </ul>
    </form>
  </div>

  <!-- header -->
  <header>
    <h1 class="title">Fkhadim's Library</h1>
  </header>
  <!-- add book button -->
  <button class="add-book">Add Book</button>

  <!-- main article -->
  <div class="book-grid">
    
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* general */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}

body {
  background-color: rgb(240, 232, 232);
  font-family: 'Poppins', sans-serif;
}

/* header */

header {
  background-color: #fff;
  height: 15vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  font-family: 'Poppins', sans-serif;
  font-size: 25px;
}

h1 {
  text-align: center;
}

/* add book button */

.add-book:active {
  background-color: black;
  color: #fff;
  transition-duration: 300ms;
}

.add-book {
  display: block;
  margin: 0 auto;
  padding: 10px 35px;
  font-size: 22px;
  margin-top: 20px;
  background-color: #fff;
  border: none;
  border: 2px solid black;
  border-radius: 5px;
}

/* book grid and card styling */

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 20px;
  margin: 0 auto;
  margin-top: 20px;
  max-width: 70vw;
  align-items: stretch;
}

.card {
  background-color: #fff;
  padding: 30px;
  padding-top: 20px;
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: 10px;
  border: 2px solid black;
}

.card-title {
  font-size: 30px;
  font-weight: 700;
}

.card-author {
  font-size: 16px;
  font-weight: 500;
}

.card-pages {
  font-size: 20px;
}

.card-read {
  font-size: 18px;
}

.card-buttons {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.card-buttons button {
  flex: 1;
  height: 25%;
  max-height: 50px;
  background-color: #fff;
  border: none;
  border: 1px solid black;
  border-radius: 3px;
  padding: 0 10px;

}

.card-buttons button:hover {
  background-color: black;
  color: #fff;
  transition-duration: 200ms;
}

/* popup form */
.popup-form {
  position: fixed;
  background-color: rgb(240, 232, 232);
  display: none; /*switches to display flex in javascript */
  flex-direction: column;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid black; 
  border-radius: 10px;
}

.cancel {
  align-self: flex-end;
  font-size: 20px;
  padding: 3.5px 10px;
  margin-top: 10px;
  margin-right: 10px;
  background-color: red;
  border: none;
  border-radius: 15px;
  border: 1px solid black;
}

.cancel:active {
  background-color: rgb(175, 13, 13);
}

.popup-form form ul li label {
  font-size: 25px;
}

.popup-form form ul li {
  margin-bottom: 10px;
}

.popup-form form ul li label {
  display: block;
  margin-bottom: 5px;
}

.popup-form form ul li input {
  padding: 5px;
  border-radius: 3px;
  height: 30px;
  border: 1px solid #ccc;
  font-size: 20px;
}

.popup-form form ul li:nth-child(4) {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}

#read {
  margin-left: 20px;
}

form {
  padding: 0 30px;
  padding-bottom: 25px;
}

.submit {
  padding: 5px 20px;
  font-size: 22px;
  background-color: #fff;
  border: none;
  border: 2px solid black;
  border-radius: 5px;
}

.submit:active {
  background-color: black;
  color: #fff;
  transition-duration: 200ms;
}

/* media queries */
@media (max-width: 640px){
  .book-grid{
    grid-template-columns: 1fr;
  }
  .card-buttons {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    height: 100%;

  }
  .card {
    padding: 20px;
  }
}

JAVASCRIPT

const addBook = document.querySelector('.add-book');
const popupForm = document.querySelector('.popup-form');
const form = document.querySelector('.form');
const cancel = document.querySelector('.cancel');
const submit = document.querySelector('.submit');
const title = document.querySelector('#title');
const pages = document.querySelector('#pages');
const author = document.querySelector('#author');
const bookgrid = document.querySelector('.book-grid');

function Book(title, author, pages, read){
  this.title = title;
  this.author = author;
  this.pages = pages;
  this.read = read;
}

Book.prototype.addCard = function(){
  let card = document.createElement('div');
  let cardDesc = document.createElement('div');
  let cardButtons = document.createElement('div');
  let cardTitle = document.createElement('div');
  let cardAuthor = document.createElement('div');
  let cardPages = document.createElement('div');
  let cardRead = document.createElement('div');
  let read = document.createElement('button');
  let del = document.createElement('button');
  card.classList.add('card');
  cardDesc.classList.add('card-desc');
  cardButtons.classList.add('card-buttons');
  cardTitle.classList.add('card-title');
  cardAuthor.classList.add('card-author');
  cardPages.classList.add('card-pages');
  cardRead.classList.add('card-read');
  read.classList.add('read');
  del.classList.add('delete');

  read.addEventListener('click', () => {
    if(this.read){
      cardRead.textContent = 'not read'
      this.read = false;
    }
    else {
      cardRead.textContent = 'read'
      this.read = true;
    }
  })
  del.addEventListener('click', () => {
    card.remove();
  })

  cardTitle.textContent = this.title;
  cardAuthor.textContent = this.author;
  cardPages.textContent = this.pages;
  cardRead.textContent = this.read ? 'read': 'Not Read'

  read.textContent = 'Read';
  del.textContent = 'Delete';

  cardDesc.appendChild(cardTitle);
  cardDesc.appendChild(cardAuthor);
  cardDesc.appendChild(cardPages);
  cardDesc.appendChild(cardRead);

  cardButtons.appendChild(read);
  cardButtons.appendChild(del);

  card.appendChild(cardDesc);
  card.appendChild(cardButtons);

  bookgrid.appendChild(card);
}


addBook.addEventListener('click', () => {
  popupForm.style.display = 'flex';
})

cancel.addEventListener('click', () => {
  popupForm.style.display = 'none';
    title.value = '';
    pages.value = '';
    author.value = '';
    read.checked = false
    
}) 

submit.addEventListener('click', () => {
  if(form.checkValidity()){
    popupForm.style.display = 'none';
    const newBook = new Book(title.value, author.value, pages.value, read.checked)
    title.value = '';
    pages.value = '';
    author.value = '';
    read.checked = false;
    newBook.addCard()
  }
})

// example book
const theHobbit = new Book('The Hobbit', 'George R.R Martin', 576, true);
theHobbit.addCard();

我尝试使用不同的方法来记录读取变量，但我没有运气知道这是如何发生的，我问了chatgpt，它无法给我一个直接的答案，所以我只想了解这是什么。我觉得这可能与我对这种面向对象的编程风格不熟悉有关。

javascript html dom javascript-objects
1个回答
0
投票

不确定它在规范中的位置，但添加“id”属性会将其分配给窗口。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="read">I am READ</div>
    <script>
      console.log(read);
    </script>
  </body>
</html>

假设这些存在是不好的做法，因此最好使用 DOM 选择器。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.