Как динамически изменять текст в зависимости от id другого элемента?

Question

[Tarantashka28]

Есть одна форма на сайте, необходимо изменять заголовок формы в зависимости от id кнопки, по которому оно было вызвано.

<button id="call">Заказать звонок</button>
Вызывается  форма с заголовком Заказать звонок
<button id="order">Оформить доставку</button>
Вызывается  форма с заголовком Оформить доставку
и т.д.

Вот, что у меня получилось написать, но код не работает

var buttonModal = document.getElementsByClassName("btn-primary");
var titleModal = document.getElementsByClassName("modal-title");

buttonModal.addEventListener("click", function (e) {
  for (var element of buttonModal) {
    if (document.getElementById("order") != null) {
      titleModal.innerHTML = "Оформить доставку";
    }
    if (document.getElementById("call") != null) {
      titleModal.innerHTML = "Заказать звонок";
    }
  }
});

Answer 1

[Павел]

var buttonModal = document.getElementsByClassName("btn-primary");
var titleModal = document.getElementsByClassName("modal-title");

Возвращает коллекцию.

Вам просто нужно повесить обработчик на каждую кнопку по id

document.querySelector("#order").addEventListener("click", function (e) {
  document.querySelector(".modal-title").innerHTML = "Оформить доставку";
});
document.querySelector("#call").addEventListener("click", function (e) {
  document.querySelector(".modal-title").innerHTML = "Заказать звонок";
});

Или если вам нужно по элементу на странице вставлять тайтл, то вешайте обработчик в цикле, на каждый элемент коллекции...

Comments

[Tarantashka28]

Спасибо за ответ, он помог мне сдвинуться с места! Написал вот такой код, он меняет заголовок, но только один раз и почему-то при повторном клике на кнопку с другим id, заголовок не меняется (в моем случае остается "Заказать звонок").. Буду благодарен за еще один совет!

var buttonModal = document.querySelectorAll(".btn");
var titleModal = document.querySelector(".modal-title");

function addTitleOrder() {
  titleModal.innerHTML = "Оформить доставку";
}
function addTitleCall() {
  titleModal.innerHTML = "Заказать звонок";
}

buttonModal.forEach((button) => {
  if (document.getElementById("order") != null) {
    button.addEventListener("click", addTitleOrder);
  }
  if (document.getElementById("call") != null) {
    button.addEventListener("click", addTitleCall);
  }
});

[Павел]

Сделайте как я написал в ответе, добавьте id к каждой кнопке, и слушайте клик по этим id...

В текущей ситуации - если у вас оба id одновременно на странице есть - то всегда будет addTitleCall исполняться