Целевое значение JS в массиве

Question

У меня есть цикл for, который отвечает за открытие пользовательского мода. Кнопка открытия определяется как несколько элементов с классом .col-sm-4

Вот код:

// Get the modal
var modal = document.getElementById('myModal');

// Get the opening trigger
var btn = document.getElementsByClassName('col-sm-4');

for (var i = 0; i < btn.length; i++) {
  // Open modal by clicking the order display
  btn[i].onclick = function(event) {

    // Check to see if target is the parent element
    if(event.target.tagName.toLowerCase() === 'div') {

      modal.style.display = 'block';
      document.getElementsByClassName('col-sm-4');
      var idDIVOrderParent = btn[0].id;
      // Having trouble grabbing the correct ID
      console.log('The order ID is ' + idDIVOrderParent);

      // extract orderId9999 from string like parentOrderId9999
      var idDIVOrder = 'o' + idDIVOrderParent.substr(7);
      console.log('The modal is currently displaying ' + idDIVOrder);

      document.getElementById(idDIVOrder).style.display = 'block';
    } else {
      // console.log('Child element clicked!');
    }
  }
}

Там, где написано var idDIVOrderParent = btn[0].id, я испытываю трудности. Как я могу получить идентификатор правильного .col-sm-4, который вызвал модал?

Answer 1

Это должно сработать.

var modal = document.getElementById('myModal');
var btn = document.getElementsByClassName('col-sm-4');

for (let i = 0; i < btn.length; i++) {
  btn[i].onclick = function(event) {

    if(event.target.tagName.toLowerCase() === 'div') {
      modal.style.display = 'block';

      let idDIVOrderParent = btn[i].id;
      console.log('The order ID is ' + idDIVOrderParent);

      let idDIVOrder = 'o' + idDIVOrderParent.substr(7);
      modal.textContent = idDIVOrder;
      console.log('The modal is currently displaying ' + idDIVOrder);
    }
  }
}

#myModal {
  width: 200px;
  text-align: center;
  background: #ccc;
  display: none;
}

<div id="parentOrderId9999" class="col-sm-4">btn1</div>
<div id="parentOrderId1111" class="col-sm-4">btn2</div>
<div id="parentOrderId2222" class="col-sm-4">btn3</div>
<div id="parentOrderId3333" class="col-sm-4">btn4</div>

<div id="myModal"></div>