Блог

Главная - Вопросы по программированию - кнопка ввода исчезает после того, как событие щелчка переходит к родительскому

кнопка ввода исчезает после того, как событие щелчка переходит к родительскому

#javascript #dom-events

#javascript #dom-события

Вопрос:

Итак, я изучаю JS и выясняю, как работают события. Я понимаю, что на высоком уровне события всплывают через узлы DOM. Прямо сейчас у меня есть bookDiv, который выполняет обновленный textContent только тогда, когда его дочерняя кнопка регистрирует щелчок. Я добавил некоторую функциональность, при которой текстовый контент обновляется только в том случае, event.target.tagName === "INPUT" если.

Моя проблема в том, что после того, как этот родительский узел (bookDiv) обрабатывает щелчок, дочерние элементы этого bookDiv (который является просто <br> и кнопкой) все исчезают. Я должен повторно добавить их, но это халтурно, и я не понимаю, почему это происходит. Ищу объяснение.

Примечание: в generateReadStatusButtonForBook(книга) Я передаю book, объект, в addEventListener, для которого требуется handleEvent. Я не включил объект в код.

Спасибо за вашу помощь

 function generateNewBookDiv(book) {
  const bookDiv = document.createElement("div");
  bookDiv.classList.add("book-item");
  bookDiv.textContent = `${book.title}rnby ${book.author}rnNumber of Pages: ${book.numPages}rnRead?${book.isRead}`;
  // quick way to get a line break after the last text content for our read status button
  const lineBreak = document.createElement("br");
  bookDiv.appendChild(lineBreak);
  bookDiv.appendChild(generateReadStatusButtonForBook(book));
  bookDiv.addEventListener("click", (event) => {
    //console.log("book div activating its click event");
    if (event.target.tagName === "INPUT") {
      //console.log("read button was identified and bubbled up");
      event.currentTarget.textContent = `${book.title}rnby ${book.author}rnNumber of Pages: ${book.numPages}rnRead?${book.isRead}`;
      const lineBreak = document.createElement("br");
      bookDiv.appendChild(lineBreak); // not sure why the <br> and <button> elements disappear after click
      bookDiv.appendChild(generateReadStatusButtonForBook(book));
    }
  });
  container.appendChild(bookDiv);
}

// add read status button for each book
function generateReadStatusButtonForBook(book) {
  const readStatus = document.createElement("INPUT");
  readStatus.setAttribute("type", "button");
  readStatus.classList.add("read-status");
  readStatus.addEventListener("click", book); // toggle read status by passing in Book object which will do the toggling itself
  return readStatus;
}

Комментарии:

1. Присвоение TextContent DIV заменяет все в DIV этим текстом. Это включает в себя <input> элементы. Вы не можете заменить только текст.

2. Поместите текст в интервал, а затем назначьте textContent промежутка.