Форум

NovichokJS · #1 (**permalink**) 08.07.2022, 16:02

<button class="btn">JavaScript</button>
    <button class="btn">HTML</button>

const btn = document.querySelector(".btn");
const handleClick = (event) => {
  textContent = `${this.innerText}`;
  console.log(event.target.textContent);
};

btn.addEventListener("click", handleClick);

Как сделать чтобы при клике на кнопку выводился в консоль текст соответствующей кнопки?

NovichokJS · #2 (**permalink**) 08.07.2022, 16:14

Такое решение будет ок?

const btn = document.querySelector(".btn");
const btn2 = document.querySelector(".btn:nth-child(2)");
const handleClick = (event) => {
  console.log(event.target.textContent);
};

btn.addEventListener("click", handleClick);
btn2.addEventListener("click", handleClick);

Просто если еще кнопки с таким же классом добавяться, то как лучше реализовать подскажите

рони · #3 (**permalink**) 08.07.2022, 17:09

Сообщение от NovichokJS

то как лучше реализовать подскажите

https://learn.javascript.ru/event-delegation

рони · #4 (**permalink**) 08.07.2022, 17:18

NovichokJS,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <script>
        document.addEventListener("click", function({target : {classList, textContent}}) {
        if(classList.contains("btn")) console.log(textContent);
        })
    </script>
</head>

<body>
    <button class="btn">JavaScript</button>
    <button class="btn">HTML</button>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript