title: Image swapping when a variable changes
body: <p>I have an html page that has one image object. </p>
  
  <p>I am trying to write some JavaScript but something isn't working in the script. I have a piece of script that reads a variable and if the variable 'e' is equal to 1, then one image appears. If 'e' is anything other number then  image 2 appears. For now, 'e' is static, but it will be dynamic. </p>
  
  <p>How do you change an image dynamically based off a variable?</p>
  
  <p>Any help is most appreciated. </p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
     &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;Title of the document&lt;/title&gt;
     &lt;body onload="changei()"&gt;
        &lt;img id="im1" src="Images/lion1.jpg" width="100" height="180" style="display:show"&gt; 
        &lt;p&gt; hello&lt;/p&gt;
        &lt;script&gt;
           function changei() {
           var e = 0;
           changei(e);
           // something  changed e in e = 0;
           change(e);
  
           function changei(e) {
           var loc = '';
           if (image.src.match("lion1")) {
           image.src = "Images/lion1.jpg";
           } else {
           image.src = "Images/lion2.jpg";
           }
           $('#im1').attr("src",loc); // change image source
           }
  
        &lt;/script&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>