title: Dynamically changing pictures based on text input
body: <p>I am writing a webpage at the moment where I am converting temperature to Fahrenheit from Celsius and vice versa. While doing that if the temperature is in a certain degree I need to display a picture and if it is in a different range I need to display another picture(and one more time). I have got the right picture displaying at the right time, but I can't seem to figure out how to get the pictures to switch, and instead they just continually add up.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script&gt;
  
  function convertTemp(fAfter) 
  {
   var c = document.getElementById('c'), f = document.getElementById('f');
   var fAfter;
   var cAfter
   if(c.value != '') 
   {
    f.value = (c.value * 9 / 5 + 32);
    fAfter = (c.value * 9 / 5 + 32);
    c.value = c.value;
    return fAfter;
   }
   else  
   {
      c.value = ((f.value - 32) * 5 / 9);
      f.value = f.value;
      fAfter = f.value;
      return fAfter;
   }
  
  
  }
  function changePicture()
  {
  
      var A = convertTemp();
      if (A &gt; 50)
          {
              var img = document.createElement('img');
              img.src = "warm.gif";
              document.body.appendChild(img);
          }
          else if (A &lt; 50 &amp; A &gt; 32)
          {
              var img = document.createElement('img');
              img.src = "cool.gif";
              document.body.appendChild(img);         
          }
              else
              {
                  var img = document.createElement('img');
                  img.src = "cold.gif";
                  document.body.appendChild(img);     
              }
  }
  function clearBoth()
  {
   var c = document.getElementById('c');
   c.value = '';
  
      var f =document.getElementById('f');
      f.value= '';
  }
  
  
  var button = document.getElementById("convert");
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;input placeholder = "Celsius" id="c" onclick='clearBoth()' &gt;&amp;#176C&lt;/br&gt;
  &lt;input placeholder = "Fahrenheit" id="f" onclick='clearBoth()' &gt;&amp;#176F&lt;/br&gt;
  &lt;button type="button" id="convert" onclick="convertTemp() &amp; changePicture()"&gt;Convert&lt;/button&gt;
  &lt;/body&gt;
  &lt;p&gt;
  
  &lt;/p&gt;
  &lt;/html&gt;
  </code></pre>