Как сделать так, чтобы при нажатии на одну кнопку был один текст, а при нажатии на вторую кнопку — текст изменялся ( с помощью простого javascript)?

Question

[DmSS1997]

В меню хочу сделать смену информации о городе при нажатии на кнопку с названием этого города, т. е . при нажатии на город один - должна быть информация по городу 1, а при нажатии на город 2 - информация по городу два. Так же у каждого города свой телефон, но не знаю, как это можно реализовать.



Вот html код:

<nav class="navbar navbar-expand-lg navbar-dark	 bg-danger ">
  <div class="container-fluid ">
	<a class="navbar-brand" style="border: solid 4px white; padding: 5px;">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link btn btn-danger" aria-current="page" href="#}" style="color:white">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link btn btn-danger" style="color:white" href="#" target="_blank">Links</a>
        </li>
        <li class="nav-item">
          <a class="nav-link btn btn-danger" style="color:white" href="#">Info</a>
        </li>
      </ul>

      <div class="info">
      	<span class="phone">8999965213</span>
      </br><span class="another_info1">Город 1 , улица 1, дом 1</span>
  	</br><span class="another_info2">Город 2 , улица 2, дом 2</span>
  	<p><button class="btn btn-danger" id="City1Button">Город1</button><button class="btn btn-danger"  id="City2Button">Город2</button></p>
      </div>
    </div>
  </div>
</nav>

javascript:

const city1Btn = document.querySelector('#City1Button');
const city2Btn = document.querySelector('#City2Button')


city1Btn.addEventListener("click", function(){
	console.log('Клик отработан')
})

city2Btn.addEventListener("click", function(){
	console.log('Клик отработан')
})

Я смог сделать отработку события по клику, но что делать дальше - я не знаю, помогите пожалуйста . Console.log написан просто для того, чтобы убедиться что обработка клика работает нормально.

Answer 1

[v3shin]

Как-то так.

<div class="cityInfo" data-city="1">
    <span class="cityInfo__city" data-city="1">1</span>
    <span class="cityInfo__city" data-city="2">2</span>
</div>
<button class="cityToggler" data-city="1">toggle 1</button>
<button class="cityToggler" data-city="2">toggle 2</button>

.cityInfo .cityInfo__city { display: none; }
.cityInfo[data-city="1"] .cityInfo__city[data-city="1"] { display: block; }
.cityInfo[data-city="2"] .cityInfo__city[data-city="2"] { display: block; }

document.addEventListener('click', function (e) {
    if (e.target.closest('.cityToggler')) {
        document.querySelectorAll('.cityInfo').forEach(cityInfo => {
            cityInfo.dataset.city = e.target.closest('.cityToggler').dataset.city;
        });
    }
});

Comments

[DmSS1997]

Спасибо большое!