title: How would I make event.target.className check for an image inside of the div named className?
body: <p>I'm sorry if I worded the title wrong, I didn't know how to say it in short.</p>
  
  <p>My problem is, I have this code:</p>
  
  <pre><code>document.addEventListener("click",changeDesc,true);
  function changeDesc() {
      if(event.target.className == "item")
      {
          var CurrentItem = document.getElementById(event.target.id);
          var CurrentDescription = CurrentItem.getElementsByClassName("itemdescription")[0].textContent;
          var ItemBox = document.getElementsByClassName("infobox")[0];
          ItemBox.innerHTML = CurrentDescription;
      }
  }
  </code></pre>
  
  <p>that checks if the thing the user clicked on is a class called 'item', and if it is, it changes the text contents of a div.</p>
  
  <p>The item is formatted like this:</p>
  
  <pre><code>&lt;li class="item" id="iron_sword"&gt;
      &lt;img src="1.png" /&gt;
      &lt;p class="itemdescription"&gt;Description 1&lt;/p&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>If I click the area that is covered by the 'li' element itself (stretches horizontally fully), it works perfectly.
  However, if I try to click the image INSIDE of the li (image 1.png), it doesn't do anything.</p>
  
  <p>This confuses me because the image is inside of the li, but I think I get why it's happening.</p>
  
  <p>But what I don't get is how I should fix this.
  Here's a jsfiddle so you can tinker with the code and if you don't understand, maybe you can see what I mean.</p>
  
  <p><a href="https://jsfiddle.net/c36uwwmr/1/" rel="nofollow noreferrer">https://jsfiddle.net/c36uwwmr/1/</a> (Try to click on any area directly to the left or the right of the images, aka the full area of the li. You can see it does what I want it to do, but it doesn't work if I click the images themselves.</p>
  
  <p>NOTE: I'm not using jquery. My javascript is external.</p>