title: Changing image on click of textbox
body: <p>I'm trying to make an html form that has multiple text box.  I would like to change the image based on the active text box.  The code I wrote works fine but would be very repetitive if I want to use more then a few changes.  </p>
  
  <p>Is there a better way to do this?</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="img"&lt;img src=image.jpg" id="f1" /&gt; &lt;/div&gt;
  
  &lt;form action = "page.php" method = "post"&gt;
   &lt;label&gt; Spec &lt;/label&gt; &lt;input type= "text" name = "t1" onclick="changeImage()" value = "" /&gt;&lt;br&gt;
   &lt;label&gt; Spec 2 &lt;/label&gt; &lt;input type="text" name = "t2" onclick = "changeImage1()" value = "" /&gt; &lt;br&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>&lt;script language="javascript"&gt;
    function changeImage() {
      var t = document.getElementById('f1');
          t.src='image1.jpg';
     }
    function changeImage1() {
      var t = document.getElementById('f1');
          t.src='image2.jpg';
     }
  &lt;/script&gt;
  </code></pre>