title: Is there a way to use a loop to click images on a page and have them display alt text? JavaScript
body: <p>I have an assignment where I have to create a webpage with multiple pictures and when you click the pictures, the alt text displays on the webpage. Part of this assignment is to avoid using similar code repeatedly in JS and to use addEventListener. It was suggested that a loop can be used but I don't quite understand how. Here is the code I have below. The repeating functions are what I would like to avoid if possible. I have to use pure JS, no JQuery.</p>
  <p>HTML:</p>
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot; /&gt;
      &lt;title&gt;Alternate Text Viewer&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot; type=&quot;text/css&quot;&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;h1&gt; PICTURES OF CATS &lt;/h1&gt;
  
      &lt;img id=&quot;catPic1&quot; src=&quot;cougar.jpg&quot; alt=&quot;Cougar (Puma concolor), Santa Monica Mountains National Recreation Area, 2015.&quot; /&gt;
      &lt;div class=&quot;hidden&quot; id=&quot;message1&quot;&gt;Cougar (Puma concolor), Santa Monica Mountains National Recreation Area, 2015.&lt;/div&gt;
  
      &lt;img id=&quot;catPic2&quot; src=&quot;domestic-cat.jpg&quot; alt=&quot;Two white cats pose for the camera at the Jimmy Carter Boyhood Farm.&quot; /&gt;
      &lt;div class=&quot;hidden&quot; id=&quot;message2&quot;&gt;Two white cats pose for the camera at the Jimmy Carter Boyhood Farm.&lt;/div&gt;
  
      &lt;img id=&quot;catPic3&quot; src=&quot;farm-cat.jpg&quot; alt=&quot;A farm cat with goats, Carl Sandburg Home National Historic Site, 2016.&quot; /&gt;
      &lt;div class=&quot;hidden&quot; id=&quot;message3&quot;&gt;A farm cat with goats, Carl Sandburg Home National Historic Site, 2016.&lt;/div&gt;
  
      &lt;img id=&quot;catPic4&quot; src=&quot;lynx.jpg&quot; alt=&quot;A large wild cat with black tufts of fur on its ears.&quot; /&gt;
      &lt;div class=&quot;hidden&quot; id=&quot;message4&quot;&gt;A large wild cat with black tufts of fur on its ears.&lt;/div&gt;
  
      &lt;img id=&quot;catPic5&quot; src=&quot;mountain-lion.jpg&quot; alt=&quot;A mountain lion walks in snow.&quot; /&gt;
  
      &lt;div class=&quot;hidden&quot; id=&quot;message5&quot;&gt;A mountain lion walks in snow.&lt;/div&gt;
  
      &lt;script src=&quot;text-viewer.js&quot;&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>JS</p>
  <pre><code>'use strict';
  
  function clickHandler() {
      let textBox = document.getElementById('message1');
      if (textBox.className === 'hidden') {
          textBox.className = '';
      } else {
          textBox.className = 'hidden';
      }
  }
  let element1 = document.getElementById('catPic1');
  element1.addEventListener('click', clickHandler); 
  
  function clickHandler2() {
      let textBox = document.getElementById('message2');
      if (textBox.className === 'hidden') {
          textBox.className = '';
      } else {
          textBox.className = 'hidden';
      }
  }
  let element2 = document.getElementById('catPic2');
  element2.addEventListener('click', clickHandler2); 
  
  function clickHandler3() {
      let textBox = document.getElementById('message3');
      if (textBox.className === 'hidden') {
          textBox.className = '';
      } else {
          textBox.className = 'hidden';
      }
  }
  let element3 = document.getElementById('catPic3');
  element3.addEventListener('click', clickHandler3);
  
  function clickHandler4() {
      let textBox = document.getElementById('message4');
      if (textBox.className === 'hidden') {
          textBox.className = '';
      } else {
          textBox.className = 'hidden';
      }
  }
  let element4 = document.getElementById('catPic4');
  element4.addEventListener('click', clickHandler4);
  
  function clickHandler5() {
      let textBox = document.getElementById('message5');
      if (textBox.className === 'hidden') {
          textBox.className = '';
      } else {
          textBox.className = 'hidden';
      }
  }
  let element5 = document.getElementById('catPic5');
  element5.addEventListener('click', clickHandler5); 
  </code></pre>
  <p>CSS</p>
  <pre><code>body {
      font-family: 'Times New Roman', Times, serif;
      background-color: beige;
      font-size: 18px;
  }
  
  h1 {
      font-style: inherit;
      color: darksalmon;
      text-align: center;
      font-size: xx-large;
  }
  
  img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      height: 300px;
      width: 500px;
      padding: 5%;
      
  }
  
  #message1, #message2, #message3, #message3, #message4, #message5 {
      width: 500px;
      height: 50px;
      background-color: lightsalmon;
      margin-left: auto;
      margin-right: auto;
  }
  
  .hidden {
      display: none;
  }
  
  </code></pre>
  <p>Please help! I am a beginner and loops have been difficult for me to figure out.</p>