title: Search for DOM Element's attribute using onClick(event) isn't working
body: <p>I am creating DOM elements programatically using unique IDs provided by a server. I need to fetch the attribute named <code>posterId</code> when clicking over one of them.</p>
  
  <p>I am attempting to pass the event currently to no avail.</p>
  
  <p>I have tried using:</p>
  
  <ul>
  <li><p><code>onClick="handlePosterClick(event)</code></p></li>
  <li><p><code>onClick="handlePosterClick(this)</code></p></li>
  <li><p><code>onClick=handlePosterClick(this.posterId)</code></p></li>
  </ul>
  
  <p>This function generates all of the Divs and elements that compose the entire block:</p>
  
  <pre class="lang-html prettyprint-override"><code>function createMovieDivForCarrousel(){
      var carrousel = '';
      for(var j = 0; j &lt; movieGenres.length; j++){
          //creates a slider, section title and defines mouseovers
          carrousel += '&lt;div class="slider"&gt;&lt;h3&gt;'+movieGenres[j]+'&lt;/h3&gt;&lt;span onmouseover="scrollL()" onmouseout="clearScroll()" class="handle handlePrev active"&gt;&lt;i class="fa fa-caret-left" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;&lt;div id="scroller" class="row"&gt;&lt;div class="row__inner"&gt;';
          for(var i = 0; i &lt; recommendedMovies.length; i++){
              if(recommendedMovies[i].genre[0].toLowerCase() == movieGenres[j].toLowerCase()){
                  carrousel +='&lt;div class="gui-card"&gt;&lt;div class="gui-card__media"&gt;&lt;img class="gui-card__img" src="'+recommendedMovies[i].poster+'"/&gt;&lt;/div&gt;&lt;div class="gui-card__details" "posterId="'+recommendedMovies[i].id+'" onClick="handlePosterClick(event)"&gt;&lt;div class="gui-card__title"&gt;'+recommendedMovies[i].title+'&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
              }
          }
          carrousel += '&lt;/div&gt;&lt;/div&gt;&lt;span onmouseover="scrollR()" onmouseout="clearScroll()"  class="handle handleNext active"&gt;&lt;i class="fa fa-caret-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/div&gt;';
      }
      return carrousel;
  }
  </code></pre>
  
  <p>This function handles what it is supposed to do with it, I have suppressed the unnecessary parts but just attempting to log the value does not work either:</p>
  
  <pre class="lang-html prettyprint-override"><code>function handlePosterClick(e) { 
      var indexOfClicked = search(e.target.getAttribute("posterId"));
      posterArray[indexOfClicked].state = !posterArray[indexOfClicked].state;
  }
  
  window.onclick = e =&gt; {} 
  </code></pre>
  
  <p>The element that holds both the ID and the function call is:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="gui-card__details" "posterId="'+recommendedMovies[i].id+'" onClick="handlePosterClick(event)"&gt;
  </code></pre>
  
  <p>For reference, the IDs go from 1 to 118 and they are all unique.</p>
  
  <hr>
  
  <p>Edit: doing <code>onClick="console.log(this)"</code> and clicking over one of the elements print the following: </p>
  
  <p><code>&lt;div class="gui-card__details" "posterid="11" onclick="console.log(this)"&gt;&lt;div class="gui-card__title"&gt;Manchester by the Sea&amp;nbsp;(2016)&lt;/div&gt;&lt;/div&gt;</code></p>
  
  <p>Removing the extra double-quotes and making it <code>posterId</code> rather than <code>"posterId"</code> also yields <code>Uncaught TypeError: Cannot read property 'state' of undefined</code>. I was unsure how to represent and that was the last state of the snippet.</p>