document.getElementsByClassNameのonclickイベントが同時にすべての要素に適用されました

Question

助けてください。再生ボタンのクリックイベントをすべてのdivに同時に適用しないようにしようとしています。クリックイベントは、クリックされた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

クリックのコールバック（質問変数は必要ありません）の前に「firstview」全体を反復処理する必要はありません。

あなたはそれぞれのクリックイベントのために、クリックしたボタンに相対的である「firstview」要素を取得する必要があります。

これは私が同じで、すべてのdiv要素に適用さから再生ボタンのクリックイベントを停止しようとしています」のサンプルコード（このコードを強化し、すべてのステップのためのヌル/未定義の確認）

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