Получить содержимое Заголовок из блока по клику Есть три карточки, как при нажатие на первую карточку получать название этой карточки

<div class="container">
// Карточка 1
<div class="card">
               
                <div class="card-body">
                    <h5 class="card-title">Заголовок 1</h5>
                    <p class="card-text">Текст 1</p>
                    <button class="btn btn-primary">Изменить</button>
                    <button class="btn btn-success">Сохранить</button>
                    <button class="btn btn-danger">Удалить</button>
                </div>
                <hr>
            </div>

// Карточка 2
<div class="card">
               
                <div class="card-body">
                    <h5 class="card-title">Заголовок 2</h5>
                    <p class="card-text">Текст 2</p>
                    <button class="btn btn-primary">Изменить</button>
                    <button class="btn btn-success">Сохранить</button>
                    <button class="btn btn-danger">Удалить</button>
                </div>
                <hr>
            </div>
// Карточка 3
<div class="card">
                <div class="card-body">
                    <h5 class="card-title">Заголовок 3</h5>
                    <p class="card-text">Текст 3</p>
                    <button class="btn btn-primary">Изменить</button>
                    <button class="btn btn-success">Сохранить</button>
                    <button class="btn btn-danger">Удалить</button>
                </div>`введите сюда код`
                <hr>
            </div>
</div

Ответы (1 шт):

Автор решения: Alexandr_Yakovlev

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

const cards = document.querySelectorAll(".card");
const cardTitles = document.querySelectorAll(".card-title");

cards.forEach((card, index) => {
  card.addEventListener("click", () => {
    console.log(cardTitles[index].innerText);
  });
});
→ Ссылка