onclick срабатывает со второго клика, как исправить?

Рейтинг: 0Ответов: 1Опубликовано: 25.01.2023

onclick работает не корректно, срабатывает со второго клика, предполагаю что это из-за вложенности блоков, но не знаю как это исправить на деле

HTML:

<div class="geo_container">
      <img src="./assets/geo.png" class="geo">
        <select name="select" class="spb" onclick="arrowMenu()">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
        <img src="./assets/Rectangle50.png" class="rectangle">
    </div>

JS:

function arrowMenu() {
  const select = document.querySelector('.spb')
  const arrowValue = document.querySelector('.rectangle')
  select.addEventListener('click', arrow)
  function arrow() {
    arrowValue.style.transform = arrowValue.style.transform == "rotate(-180deg)" ? "rotate(0deg)" : "rotate(-180deg)"
    arrowValue.classList.add('transition_arrow')
  }
}
css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Вам нужно удалить лишнюю функцию arrrow. Ваш обработчик срабатывает со второго раза, потому что функция arrowMenu вместо выполнения нужного действия лишь привязывает к нажатию ещё один обработчик arrow. Который при 2м нажатии и срабатывает. Удалите функцию arrow, а ее код вставьте напрямую в arrowMenu:

function arrowMenu() {
  const select = document.querySelector('.spb')
  const arrowValue = document.querySelector('.rectangle')
  
  arrowValue.style.transform = arrowValue.style.transform == "rotate(-180deg)" ? "rotate(0deg)" : "rotate(-180deg)"
  arrowValue.classList.add('transition_arrow')
  
}