title: Convert HTML element ID to string for comparison
body: <p>Is it possible to use the value of this.id from the following HTML code in a comparison ?</p>
  
  <pre><code>&lt;div id="Kids Bikes" class="album" onClick="javascript:loadPopupContent(this.id)"&gt;  
          &lt;img src="images/kidsbikes/1.jpg" class="uitgelicht" &gt;
          &lt;div style="background-color:rgba(240, 124, 0, 0.6)" class="overlay"&gt;&lt;p class="overlayx"&gt;Kids Bikes&lt;/p&gt;&lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm creating a photoalbum. When a visitor clicks a photo a popup shows up with thumbnails from photos of the album the user clicked. This function is used to create a popup:</p>
  
  <pre><code>function loadPopupContent(id){
  //centering with css
  centerPopup();
  //load popup
  loadPopup();
  // load content
  loadContent(id);
  </code></pre>
  
  <p>}</p>
  
  <p>The loadContent function looks like this,  but it doesn't do anything. I think it's because i'm trying to compare a string with a HTML element, but i'm not sure. When I remove the if (albumname == 'AllroundBikes'){}else{} statement, everything works fine.</p>
  
  <pre><code>function loadContent(eleId){
  if (eleId != 0){
  
      var albumnaam = eleId.replace("-","");
      var albumname = albumnaam.replace(" ","");
  
      if (albumname == 'AllroundBikes'){ // 5 foto's
          $("#popupContent").html("&lt;h1&gt;" + eleId + "&lt;/h1&gt;" +
          "&lt;a class='thumbnail' href='#thumb'&gt;&lt;img src=images/" + albumname + "/1.jpg class='uitgelichtvak' /&gt;&lt;span&gt;&lt;img src=images/" + albumname + "/1.jpg height='415' width='750'/&gt;&lt;/a&gt;" + 
          "&lt;a class='thumbnail' href='#thumb'&gt;&lt;img src=images/" + albumname + "/2.jpg class='uitgelichtvak' /&gt;&lt;span&gt;&lt;img src=images/" + albumname + "/2.jpg height='415' width='750'/&gt;&lt;/a&gt;" +
          "&lt;a class='thumbnailr' href='#thumb'&gt;&lt;img src=images/" + albumname + "/3.jpg class='uitgelichtvak' /&gt;&lt;span&gt;&lt;img src=images/" + albumname + "/3.jpg height='415' width='750'/&gt;&lt;/a&gt;" +
          "&lt;a class='thumbnailr' href='#thumb'&gt;&lt;img src=images/" + albumname + "/4.jpg class='uitgelichtvakr' /&gt;&lt;span&gt;&lt;img src=images/" + albumname + "/4.jpg height='415' width='750'/&gt;&lt;/a&gt;" +
          "&lt;a class='thumbnail' href='#thumb'&gt;&lt;img src=images/" + albumname + "/5.jpg class='uitgelichtvak' /&gt;&lt;span&gt;&lt;img src=images/" + albumname + "/5.jpg height='415' width='750'/&gt;&lt;/a&gt;");
      } 
      else if {       
          $("#popupContent").html("&lt;h1&gt;" + eleId + "&lt;/h1&gt;" +
          "&lt;a class='thumbnail' href='#thumb'&gt;&lt;img src=images/" + albumname + "/1.jpg class='uitgelichtvak' /&gt;&lt;span&gt;&lt;img src=images/" + albumname + "/1.jpg height='415' width='750'/&gt;&lt;/a&gt;" + 
          "&lt;a class='thumbnail' href='#thumb'&gt;&lt;img src=images/" + albumname + "/2.jpg class='uitgelichtvak' /&gt;&lt;span&gt;&lt;img src=images/" + albumname + "/2.jpg height='415' width='750'/&gt;&lt;/a&gt;" +
          "&lt;a class='thumbnailr' href='#thumb'&gt;&lt;img src=images/" + albumname + "/3.jpg class='uitgelichtvak' /&gt;&lt;span&gt;&lt;img src=images/" + albumname + "/3.jpg height='415' width='750'/&gt;&lt;/a&gt;" +
          "&lt;a class='thumbnailr' href='#thumb'&gt;&lt;img src=images/" + albumname + "/4.jpg class='uitgelichtvakr' /&gt;&lt;span&gt;&lt;img src=images/" + albumname + "/4.jpg height='415' width='750'/&gt;&lt;/a&gt;" +
          "&lt;a class='thumbnail' href='#thumb'&gt;&lt;img src=images/" + albumname + "/5.jpg class='uitgelichtvak' /&gt;&lt;span&gt;&lt;img src=images/" + albumname + "/5.jpg height='415' width='750'/&gt;&lt;/a&gt;" +
          "&lt;a class='thumbnail' href='#thumb'&gt;&lt;img src=images/" + albumname + "/6.jpg class='uitgelichtvak' /&gt;&lt;span&gt;&lt;img src=images/" + albumname + "/6.jpg height='415' width='750'/&gt;&lt;/a&gt;" +
          "&lt;a class='thumbnailr' href='#thumb'&gt;&lt;img src=images/" + albumname + "/7.jpg class='uitgelichtvak' /&gt;&lt;span&gt;&lt;img src=images/" + albumname + "/7.jpg height='415' width='750'/&gt;&lt;/a&gt;" +
          "&lt;a class='thumbnailr' href='#thumb'&gt;&lt;img src=images/" + albumname + "/8.jpg class='uitgelichtvakr' /&gt;&lt;span&gt;&lt;img src=images/" + albumname + "/8.jpg height='415' width='750'/&gt;&lt;/a&gt;" +
          "&lt;a class='thumbnailo' href='#thumb'&gt;&lt;img src=images/" + albumname + "/9.jpg class='uitgelichtvak' /&gt;&lt;span&gt;&lt;img src=images/" + albumname + "/9.jpg height='415' width='750'/&gt;&lt;/a&gt;" +
          "&lt;a class='thumbnailo' href='#thumb'&gt;&lt;img src=images/" + albumname + "/10.jpg class='uitgelichtvak' /&gt;&lt;span&gt;&lt;img src=images/" + albumname + "/10.jpg height='415' width='750'/&gt;&lt;/a&gt;" +
          "&lt;a class='thumbnailro' href='#thumb'&gt;&lt;img src=images/" + albumname + "/11.jpg class='uitgelichtvak' /&gt;&lt;span&gt;&lt;img src=images/" + albumname + "/11.jpg height='415' width='750'/&gt;&lt;/a&gt;" +
          "&lt;a class='thumbnailro' href='#thumb'&gt;&lt;img src=images/" + albumname + "/12.jpg class='uitgelichtvakr' /&gt;&lt;span&gt;&lt;img src=images/" + albumname + "/12.jpg height='415' width='750'/&gt;&lt;/a&gt;");
  
  } 
  else {
      $("#popupContent").html("&lt;h1&gt;Empty&lt;/h1&gt;");
  }
  </code></pre>
  
  <p>}</p>