onclick event on document.getElementsByClassName применяется ко всем элементам одновременно

Question

Пожалуйста, помогите. Я пытаюсь остановить событие click на кнопке воспроизведения от одновременного применения ко всем div. Я хочу, чтобы событие click применимо только к div, на который было нажато. Пожалуйста, см. Код ниже, что я до сих пор. Я использую ванильный Javascript.

<style> 
       div{ 
        width: 200px; 
        height: 200px; 
        border: 1px solid black; 
       } 
       .secondview{ 
        background-color: blue; 
       } 
       .firstview{ 
        visibility: hidden; 
        background-color: red; 
       } 
     </style> 
     <div class="secondview"> 
      <button class="play"> Play </button> 
      <div class="firstview"> 
       <p>Play this game </p> 
       <button id="submit"> Submit </button> 
      </div> 
     </div> 
     <div class="secondview"> 
      <button id="btn" class="play"> Play </button> 
      <div class="firstview"> 
       <p>Play this game </p> 
       <button id="submit"> Submit </button> 
      </div> 
     </div> 
     <div class="secondview"> 
      <button class="play"> Play </button> 
      <div class="firstview"> 
       <p>Play this game </p> 
       <button id="submit"> Submit </button> 
      </div> 
     </div> 
    <script> 
     var playBtn = document.getElementsByClassName("play"); 
      for (var i=0; i<playBtn.length; i++){ 
       playBtn[i].addEventListener("click", showQuestion) 
      } 
     var question = document.getElementsByClassName("firstview"); 
      function showQuestion(){ 
       for(j=0; j<question.length; j++){ 
        question[j].style.visibility = "visible"; 
       } 
      } 
    </script> 

Answer 1

Вам do'nt нужно перебирать все более «FirstView» до обратного вызова щелчка (переменный вопрос не требуется).

Вам нужно получить элемент «firstview», который находится по отношению к нажатой кнопке для каждого события клика.

Это пример кода (усилить этот код и проверить нуль/Undefine для каждого шага)

function showQuestion (el){ 
    var view = el.target.parentElement.getElementsByClassName("firstview")[0]; 
     view.style.visibility = "visible"; 
}