javascript - Selecting the h2 element based on a clicked parent -


i have div called "panel" multiple child elements, each class of poster. each poster card displaying restaurant information. want target h2 whichever poster user clicks on, irrespective of area of poster click. i'm using event delegation on panel i'm not sure how target h2.

html:

<div class="panel">    <div class="poster">     <div class="wrapper">       <p class="time">6-7:30pm</p>       <div class="inner-wrapper">         <h2 class="restaurant-title">restaurant a</h2>         <h3 class="deal-description">bla bla bla</h3>       </div>     </div>   </div>      <div class="poster">     <div class="wrapper">       <p class="time">2-4:30pm</p>       <div class="inner-wrapper">         <h2 class="restaurant-title">restaurant b</h2>         <h3 class="deal-description">bla bla bla</h3>       </div>     </div>   </div>      <div class="poster">     <div class="wrapper">       <p class="time">1-5:30pm</p>       <div class="inner-wrapper">         <h2 class="restaurant-title">restaurant c</h2>         <h3 class="deal-description">bla bla bla</h3>       </div>     </div>   </div>  </div> 

js:

var panel = document.queryselector(".panel");  panel.addeventlistener("click", handleclick); 

use queryselector() in javascript

 function handleclick(){      var h2=this.queryselector("h2"); } 

demo


Comments

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

java - How to filter a backspace keyboard input -

java - Show Soft Keyboard when EditText Appears -