Как получать id div по клику на него

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

не могу понять как правильно получать id div по клику на него. Написал вот такой вот код, вроде все работает хорошо, но когда заходишь на сайт с мобильного телефона. То id получается некоректно. Например нажимаешь на блок нечего не получил и так раза 3, потому получаю id, потом опять такая же ситуация. То есть click на мобильном устройстве не срабатывает с первого раза.

Эта система нужна когда пользователь нажимает на div менялась ссылка в попапе.

Есть ли еще какие то способы получать id div по клику ?

Буду рад вашей помощи.

<div id="buttonBlock">
<span id="lin1">1</span>
<span id="lin2">2</span>

<div id="testinnerhtml"></div>
</div>


      document.getElementById('buttonBlock').addEventListener('click', function(e){
      var id = e.target.id;
      document.getElementById('testinnerhtml').innerHTML = `
          <a href="<?php echo cl_link('link/${id}'); ?>" class="a-m-btn" data-spa="true">test link id
</a>
        `
    });
javascript html
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Код рабочий. Тот адресс в ссылке что вы туда пихаете через php вызов работать не бутет. JS - отрадатываеться в браузере клиента, php - компилируеться на сервере.

 document.getElementById('buttonBlock').addEventListener('click', function(e) {
   let id = e.target.id;
   createElement(id);
 });

 function createElement(id) {
   document.getElementById('testinnerhtml').innerHTML = `<a href="link/${id}" class="a-m-btn" data-spa="true">test link id${id}</a>`
 }
#buttonBlock {
  height: 50px;
  border: 1px solid #000;
}

span {
  display: inline-block;
  text-align: center;
  width: 50px;
  height: 50px;
  margin: 0 20px;
  border: 1px solid #f00;
}

.a-m-btn {
  width: 100px;
  height: 50px;
  display: inline-block;
  background-color: pink;
}
<div id="buttonBlock">
  <span id="lin1">1</span>
  <span id="lin2">2</span>

  <div id="testinnerhtml"></div>
</div>