Не срабатывает кнопке при клике на текст внутри ее

const contactBtn = document.querySelector('.contacts__button');
const contactList = document.querySelector('.contacts__list');
const contactListItem = contactList.querySelectorAll('.contacts__list-link');
const contactInfo = document.querySelector('.contacts__info');
const arrow = document.querySelector('.contacts__button-picture-active');
const textcontactBtn = document.querySelector('.contacts__button-name');

//array cities 


//toggle contactBtn active
contactBtn.addEventListener('click', function() {
  console.log('клик по кнопке');
  contactList.classList.toggle('contacts__list-active');
  arrow.classList.toggle('contacts__button-picture-active');
});



//замена текста в кнопке при клике на строку из списка и подстановка текстов в адрес, тел...
contactListItem.forEach(event => {
  event.addEventListener('click', function() {
    textcontactBtn.innerText = this.innerText;
    for (let city of cities) {
      if (contactBtn.innerText == city.city) {
        contactInfo.classList.add('contacts__info-active');
        document.querySelector('#city').textContent = city.city;
        document.querySelector('#phone').textContent = city.phone;
        document.querySelector('#office').textContent = city.office;
      }
    }
  })
})

.dropdown {
    position: relative;
}

.contacts__button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
    padding-right: 35px;
    width: 450px;
    height: 50px;
    border: none;
    margin-top: 148px;
    background: #D6E7D2;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25);
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: 0.05em;
    text-align: left;
    color: #717171;
    cursor: pointer;
}

.contacts__button-name {
    max-width: 204px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 40px;
    letter-spacing: 0.05em;
    color: #717171;
}

.contacts__button-picture {
    transition: 0.5s;
}

.contacts__button-picture-active {
    transform: rotate(180deg);
}

.contacts__list {
    position: absolute;
    left: 0;
    top: 198px;
    overflow: hidden;
    background-color: #DCE9D9;
    width: 100%;
    display: none;
}
.contacts__list-active {
    display: block;
}

<div class="dropdown">
  <div class="contacts__button">
    <span class="contacts__button-name">City</span>
    <img class="contacts__button-picture contacts__button-picture-active" src="./src/img/contact-button-circle.png" alt="Contacts-button" width="16" height="16">
  </div>
  <ul class="contacts__list">
    <li class="contacts__list-link">Canandaigua, NY</li>
    <li class="contacts__list-link">New York City</li>
    <li class="contacts__list-link">Yonkers, NY</li>
    <li class="contacts__list-link">Sherill, NY</li>
  </ul>

  <div class="contacts__info">
    <table class="contacts__info_table">
      <tbody>
        <tr>
          <th>City:</th>
          <td id="city"></td>
        </tr>
        <tr>
          <th>Phone:</th>
          <td id="phone"></td>
        </tr>
        <tr>
          <th>Office adress:</th>
          <td id="office"></td>
        </tr>

      </tbody>
    </table>
    <a class="contacts__info_call" href="">Call us</a>


  </div>

</div>
Метки