Почему работа js скрипта выполняется только после 2-го клика на кнопку?

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

<a href="#" class="js-money-car-link">Купить в кредит</a>
<a href="#" class="js-money-car-link">Купить в кредит3</a>
<a href="#" class="js-money-car-link">Купить в кредит4</a>
<a href="#" class="js-money-car-link">Купить в кредит5</a>

window.addEventListener('DOMContentLoaded', (event) => {
  let body = document.querySelector('body');

  body.addEventListener('click', listener); //событие клика по родителю

  let btns = document.querySelectorAll('.js-money-car-link'); //перебираю кнопки и добавляю им id если навели мышкой на кнопку, если убрали курсор, то удаляю id. Этот id нужен обязательно чтобы сработал сторонний скрипт
  btns.forEach(el => {
    el.addEventListener('mouseover', function () {
      el.setAttribute('id', 'money-care-link');
    });
    el.addEventListener('mouseleave', function () {
      el.removeAttribute('id', 'money-care-link');
    });
  });


  function listener(e) { //функция которая проверяет есть ли id у целевого элемента и выполнить функцию стороннего скрипта
    e.preventDefault();
    let target = e.target;
    if (target.id == 'money-care-link') {
      doFunc();
    }
  }

  function doFunc(e) { //функция стороннего скрипта
    MoneyCareWidget.init(
      {
        "orderId": "1232844",
        "pointId": "tt_test_1V2",
        "firstName": "Иван",
        "secondName": "Иванович",
        "lastName": "Иванов",
        "phone": "9024567890",
        "goods": [
          {
            "title": "Телефон",
            "price": "20000"
          }
        ]
      },
      "api_test_v2");
  }

  

});
  • Вопрос задан
  • 123 просмотра
Пригласить эксперта
Ответы на вопрос 1
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
А зачем нужен такой изврат с подменой id? Что мешает написать проще?
function listener (e) {
  e.preventDefault();
  if (e.target.classList.contains('js-money-car-link')) {
    doFunc();
  }
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы