Как мне сделать так, чтобы DOMContentLoaded выбрал все указанные c элементы div?

Question

У меня есть проект, в котором посетителям нужно будет открыть небольшое всплывающее окно windows для доступа к контенту. Но это только один раз в день.

Мне уже удалось быть частью скрипта, но этот jQuery выбирает только первый элемент div. Как выбрать все указанные c элементы div?

http://jsfiddle.net/bieldade/r8Lo370y/70/

document.addEventListener("DOMContentLoaded", function() {
  var vlz = document.getElementById("vlz");
  var ls = localStorage.getItem("vlz");
  var data = new Date();
  var data_atual = data.valueOf();
  var data24 = data.setSeconds(data.getSeconds() + 5);

  if (ls < data_atual) {
    vlz.style.display = "block";
    document.getElementById("clz").onclick = function() {
      localStorage.setItem("vlz", data24);
      vlz.style.display = "none";
    }
  }
});

.select {
  padding: 10px;
  background: #eee;
  margin: 10px
}

#vlz {
  display: none;
  width: 250px;
  height: 50px;
  background: #555;
}

<div id="vlz" class='select'>
  <div class='vlz-shw'>
    show
  </div>
  <div id="clz" class='select'>cose</div>
</div>

<div id="vlz" class='select'>
  <div class='vlz-shw'>
    show
  </div>
  <div id="clz" class='select'>cose</div>
</div>

<div id="vlz" class='select'>
  <div class='vlz-shw'>
    show
  </div>
  <div id="clz" class='select'>cose</div>
</div>

Answer 1

У вас не должно быть нескольких div с одинаковым идентификатором, вместо этого вы можете использовать class. Существуют более новые способы выбора элементов в javascript с помощью querySelector и querySelectorAll.

Когда вы выбираете элементы с помощью селектора классов, вам необходимо l oop через них и добавить прослушиватель событий индивидуально .

Вот рабочая скрипка

document.addEventListener("DOMContentLoaded", function() {
  var vlz = document.querySelectorAll(".vlz");
  var ls = localStorage.getItem("vlz");
  var data = new Date();
  var data_atual = data.valueOf();
  var data24 = data.setSeconds(data.getSeconds() + 5);

  if (ls < data_atual) {
    vlz.forEach(v => {
      v.classList.add('showvlz')
    })
  }

  document.querySelectorAll(".clz").forEach(c => {
    c.addEventListener('click', function(event) {
      // do stuff here
        event.target.parentNode.classList.add('removevlz');
    })
  })
});

.select {
  padding: 10px;
  background: #eee;
  margin: 10px
}

.vlz {
  display: none;
  width: 250px;
  height: 50px;
  background: #555;
}

.showvlz {
  display: block;
}

.removevlz {
  display: none;
}

<div class="vlz" class='select'>
  <div class='vlz-shw'>
    show
  </div>
  <div class="clz" class='select'>cose</div>
</div>

<div class="vlz" class='select'>
  <div class='vlz-shw'>
    show
  </div>
  <div class="clz" class='select'>cose</div>
</div>

<div class="vlz" class='select'>
  <div class='vlz-shw'>
    show
  </div>
  <div class="clz" class='select'>cose</div>
</div>

Answer 2

Прежде всего вы должны использовать классы вместо идентификаторов. Я предлагаю вам использовать querySelectorAll после того, как вы изменили id на class

document.querySelectorAll('.vlz')