title: Javascript - style elements in an array
body: <p>I have an array of images and I want to style those images with a border whenever they are clicked on. I can get one image to style using an index number, but can't seem to get the function to run on each image whenever it's clicked on. I get a "cannot set property of 'border' of undefined
  at HTMLImageElement.picStyle".</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="pic-container"&gt;
      &lt;img class ="dogImg" src="img/dog1.jpg"&gt;
      &lt;img class ="dogImg" src="img/dog2.jpg"&gt;
      &lt;img class ="dogImg" src="img/dog3.jpg"&gt;
      &lt;img class ="dogImg" src="img/dog4.jpg"&gt;
      &lt;img class ="dogImg" src="img/dog5.jpg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var dogPics = document.getElementsByClassName('dogImg');
  
  function picStyle() {
     dogPics.style.border = "1px solid black";
     }
  
  
  for (var i = 0; i &lt; dogPics.length; i++) {
     dogPics[i].addEventListener('click' , picStyle ) ; 
  }
  </code></pre>