title: Need help adjusting changeImage js code
body: <p>I'm a js beginner and I need some help to clean this code up. It's a changeImage situation, where I'm showing a check box with images rather than with an actual form check box. So the user can click an empty check box and the click changes the image to a check mark. And they can click again to unchecked. That all works, but this is the issue. </p>
  
  <p>After you click one of the check box images, you then have to click twice to get another check box image to change. I'd like it to be a smooth, one click situation and I don't know what's preventing that. Here's a snippet of the code I'm using -</p>
  
  <pre><code>var newsrc = "img/checked.gif";
  
  function changeImage() {
      if(newsrc == "img/checked.gif") {
          document.images["challenge"].src = "img/checked.gif";
          document.images["challenge"].alt = "Completed";
          newsrc = "img/checkBox.gif";
      } else {
          document.images["challenge"].src = "img/checkBox.gif";
          document.images["challenge"].alt = "Unfinished";
          newsrc = "img/checked.gif";
      }
  }
  
  function changeImage2() {
      if(newsrc == "img/checked.gif") {
          document.images["goal1"].src = "img/checked.gif";
          document.images["goal1"].alt = "Completed";
          newsrc = "img/checkBox.gif";
      } else {
          document.images["goal1"].src = "img/checkBox.gif";
          document.images["goal1"].alt = "Unfinished";
          newsrc = "img/checked.gif";
      }
  }
  </code></pre>
  
  <p>There are six images in all in the script. I'm just showing the first two. Any help you can give would be great.</p>