как получить элемент щелчка из нескольких классов в javascript

#javascript

Вопрос:

Я загрязняю div с помощью следующих кодов каждый раз, когда на веб-сайте нажимается кнопка «Добавить».

 const addClick = document.getElementById("addBtn");
addClick.addEventListener("click", () => {
    addNote();
});

function addNote(){
    const notes = document.getElementById("notes");
    notes.innerHTML  = `
    <div class="note">
    <div class="delete"><i class="fas fa-times"></i></div>
    <button class="save"><i class="fas fa-check"></i></button>
    <textarea type="text" class="text"></textarea>
    </div>
    `;
 }

С помощью этого кода я создаю заметки, которые имеют параметры удаления или сохранения. Я хочу знать, какой элемент класса был нажат. Я хочу сделать это с помощью ванильного Javascript.

1. Вы можете использовать event.target для определения того, какая заметка была нажата

2. Добавьте прослушиватель событий в родительский элемент и используйте распространение событий, чтобы перехватить дочерний элемент, на который был нажат, вот так note.addEventListener('click', (e) => {const clickedEl = e.target}

3. Какое значение указано в примечании? @BlackMath

4. Я использовал onclick=function(событие), но по какой-то причине он не работал, когда я его реализовал. innerHTML

5. @ZeeshanAhmed Я имел в виду notes.addEventListener(...)

Ответ №1:

Вы можете использовать делегирование событий:

добавьте прослушиватель событий к родительскому элементу или документу, а затем проверьте, содержит ли элемент clicked класс, на который вы хотите настроить таргетинг.

Возможно, вам также потребуется проверить, является ли элемент clicked дочерним элементом кнопки (значка)

 document.addEventListener("click", function(event) {
    var target = event.target;
    if (isElement(target, 'delete')) {
      console.log("delete button clicked", target.closest(".note"));
    } else if (isElement(target, "save")) {
      console.log("save button clicked", target.closest(".note"));
    }
});

function isElement(element, className) {
    return element.classList.contains(className) || element.closest(`.${className}`);
}

  <div class="note">
    <button class="delete"><i class="fas fa-times"></i>Delete</button>
    <button class="save"><i class="fas fa-check"></i>Save</button>
    <textarea type="text" class="text"></textarea>
</div>

<div class="note">
    <button class="delete"><i class="fas fa-times"></i>Delete</button>
    <button class="save"><i class="fas fa-check"></i>Save</button>
    <textarea type="text" class="text"></textarea>
</div>

<div class="note">
    <button class="delete"><i class="fas fa-times"></i>Delete</button>
    <button class="save"><i class="fas fa-check"></i>Save</button>
    <textarea type="text" class="text"></textarea>
</div>

Развернуть фрагмент

1. Привет, спасибо за это. Наконец, я смог добиться этого с помощью event.target. Я также использую firebase для db. Большое спасибо.

2. Мне пришлось присваивать уникальный идентификатор каждой новой сгенерированной заметке, и с помощью event.target я смог поймать этот конкретный идентификатор и выполнить задание. Действительно ценю вашу помощь.

Ответ №2:

Вот фрагмент для вашего случая.

HTML

 <div id="app"></div>

 const appDiv = document.getElementById("app");
appDiv.innerHTML = `<h1>JS Starter</h1>`;

[1, 2, 3, 4].forEach((el, index) => {
  const note = document.createElement("div");
  appDiv.insertAdjacentElement("afterend", note);
  note.classList.add("note");
  note.addEventListener("click", () => {
    appDiv.innerHTML = `<h1>Box number: ${index   1}<h1>`;
  });
});

CSS

 .note {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  margin: 10px;
}

.note:hover {
  cursor: pointer;
}

1. Привет, спасибо за это решение, я не смог точно реализовать это в соответствии с моим требованием, но, как вы упомянули в комментариях, я смог добиться этого с помощью e.target, как только я дал им уникальные идентификаторы. Большое спасибо за ваше время, действительно ценю это.