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

Question

[Валентин Попов]

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

<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");
  }

  

});

Answer 1

[Rsa97]

А зачем нужен такой изврат с подменой id? Что мешает написать проще?

function listener (e) {
  e.preventDefault();
  if (e.target.classList.contains('js-money-car-link')) {
    doFunc();
  }
}

Comments

[Валентин Попов]

Дело в том, что к кнопкам этот id должен быть привязан чтобы сторонний скрипт отработал. Если этот id прописать на кнопках, то клик будет отрабатывать только на одной из них, поэтому я через делегирование и перебор кнопок осуществляю такое действие, но не могу понять почему скрипт отрабатывает только после второго клика на кнопку.

[Rsa97]

Валентин Попов,

function listener (e) {
  e.preventDefault();
  if (e.target.classList.contains('js-money-car-link')) {
    const el = document.getElementById('money-care-link');
    if (el) {
      el.id = 'money-care-link';
    }
    e.target.setAttribute('id', 'money-care-link');
    doFunc();
  }
}

[Валентин Попов]

Rsa97, Ваш код просто добавляет id money-care-link кнопкам после того, как кликнем на них. Но я упомянул выше, что данный ID привязан к стороннему скрипту и если одновременно у всех кнопок сразу будет это идентификатор, то скрипт будет работать только для одной кнопки. Поэтому я и делаю такие манипуляции с идентификатором чтобы на странице при клике на кнопку была только одна кнопка с таким ID. Но сторонний скрипт почему-то начинает работать только после второго клика на кнопку. В этом и вопрос ПОЧЕМУ так происходит?
Вы можете мой код просто скопировать и запустить jsfiddle и посмотреть как все это работает.

[Rsa97]

Валентин Попов, Код перед добавлением идентификатора убирает уже установленный такой же.

[Валентин Попов]

Rsa97, к сожалению Ваш код не работает правильно, как мне необходимо.