title: Change image based on Radio Button Selection in HTML/JavaScript
body: <p>I have a project where I am to have an image displayed for three different radio button groups.  If a radio button is selected, the image needs to change to a different pic.  I have the rest of the code doing what I need it to, except this part.  I am technically also suppose to change the radio button font color and bold it when it is selected as well.  I haven't gotten to even attempt that because I cant get the image switching to work.  Here is my code.  Any input will be helpful.  The code starts with a function to do some calculations based on the radio button selection.  it then goes into some validation parts, submission and clearing.  The image stuff I did is closer to the bottom before the body of the HTML.  Like I said, any input at all will be greatly appreciated.</p>
  <pre><code>&lt;html&gt;
   &lt;head&gt;
      &lt;title&gt; Final Project Order Form &lt;/title&gt;
  
      &lt;script type=&quot;text/javascript&quot;&gt;
          var prices = new Object();
          function updateTotal () {
              var total = 0.00;
              for (var price in prices) {
                  total += parseInt(prices[price]);
              }
              document.getElementById(&quot;total&quot;).value = total;   // Add the id &quot;total&quot; to the input field
          }
          function doClear()
              {
                  document.AddressForm.customer.value = &quot;&quot;;
                  document.AddressForm.address.value = &quot;&quot;;
                  document.AddressForm.city.value= &quot;&quot;;
                  document.AddressForm.state.options[0].selected = &quot;true&quot;;
                  document.AddressForm.zip.value = &quot;&quot;;
                  document.AddressForm.phone.value= &quot;&quot;;
                  document.AddressForm.email.value= &quot;&quot;;
              document.AddressForm.total.value= &quot;&quot;;
  
                  document.OrderForm.cases[0].checked = false;
                  document.OrderForm.cases[1].checked = false;
                  document.OrderForm.cases[2].checked = false;
  
                  document.OrderForm.monitors[0].checked = false;
                  document.OrderForm.monitors[1].checked = false;
                  document.OrderForm.monitors[2].checked = false;
  
                  document.OrderForm.printers[0].checked = false;
                  document.OrderForm.printers[1].checked = false;
                  document.OrderForm.printers[2].checked = false;
  
                  return;
              }
  
              function validateText()
              {
                  var transcribed = true;
                  
                  var notification = &quot;&quot;;
                      
                  var customer = document.AddressForm.customer.value;
                  var address = document.AddressForm.address.value;
                  var city = document.AddressForm.city.value;
                  var state = document.AddressForm.state.value;
                  var zip = document.AddressForm.zip.value;
                  var phone = document.AddressForm.phone.value;
                  var email = document.AddressForm.email.value;
                      
                  if (customer.length == 0) 
                  {
                      transcribed = false;
                      alert(&quot;Please enter your name.&quot;);
                      return;
                  }
                      
                  if (address.length == 0) 
                  {
                      transcribed = false;
                      alert(&quot;Please enter your address.&quot;);
                      return;
                  }
                      
                  if (city.length == 0) 
                  {
                      transcribed = false;
                      alert(&quot;Please enter your city.&quot;);
                      return;
                  }
                      
                  if (zip.length == 0) 
                  {
                      transcribed = false;
                      alert(&quot;Please enter your five digit zip.&quot;);
                      return;
                  }
                      
                  if (phone.length == 0) 
                  {
                      transcribed = false;
                      alert(&quot;Please enter your phone.&quot;);
                      return;
                  }
                      
                  if (email.length == 0) 
                  {
                      transcribed = false;
                      alert(&quot;Please enter your email.&quot;);
                      return;
                  }
                      
                  if (!transcribed)
                  {
                      alert(notification);
                  }
                      
                  return transcribed;
              }
                  
              function validateEmail()
                  {
                      var email = document.AddressForm.email.value;
                  
                      var pass = true;
                      
                      if (email.indexOf('@') == -1)
                      {
                          pass = false;
                      }
                      
                      else if (email.indexOf('@') == 0)
                      {
                          pass = false;
                      }
                      
                      else if (email.indexOf('@') == email.length - 1)
                      {
                          pass = false;
                      }
                                  
                      return pass;
                  }
  
                  /*
                      Checking all the format functions
                  */              
                  function validatePhone()
                  {
      
                      var phone = document.AddressForm.phone.value;
          
                      if(isTenDigits(phone) || isTwelveAndBrackets(phone) || isTwelveAndDashes(phone) || isBracketsAndDash(phone))
                          return true;
          
                      return false;
          
                  }
      
                  /*
                      Checking all the Zip is correct
                  */  
                  function validateZip()
                  {
      
                      var zip = document.AddressForm.zip.value;
          
                      if(isfiveDigits(zip))
                          return true;
          
                      return false;
          
                  }
      
                  /*
                      Checking the 10-digit format
                  */
                  function isTenDigits(phone)
                  {
          
                      if(phone.length != 10)
                          return false;
              
                      var pass = true;
  
                      for (var i = 0;i &lt; phone.length; i++)
                      {
                          var c = phone.charAt(i);
                          if (!isDigit(c))
                          {
                              pass = false;
                          }
                      }
  
                      return pass;
                  }
      
                  /*
                  Checking the (xxx)xxxxxxx format
                  */
                  function isTwelveAndBrackets(phone)
                  {
      
                      if(phone.length != 12)
                          return false;
          
                      var pass = true;
  
                      for (var i = 0;i &lt; phone.length; i++)
                      {
                          var c = phone.charAt(i);
                          var pos = i + 1;
                          if(i == 0)
                          {
                              if(c != '(')
                              {
                                  pass = false;
                              }
                          }
                          else if(i == 4)
                          {
                              if(c != ')')
                              {
                                  pass = false;
                              }
                          }
                          else 
                          {
                              if (!isDigit(c))
                              {
                                  pass = false;
                              }
                          }
                      }
  
                      return pass;
                  }
      
                  /*
                  Checking the xxx-xxx-xxxx format
                  */
                  function isTwelveAndDashes(phone)
                  {
      
                      if(phone.length != 12)
                          return false;
                      var pass = true;
          
                      for (var i = 0;i &lt; phone.length; i++)
                      {
                          var c = phone.charAt(i);
                          var pos = i + 1;
                          if(i == 3)
                          {
                              if(c != '-')
                              {
                                  pass = false;
                              }
                          }
                          else if(i == 7)
                              {
                                  if(c != '-')
                                  {
                                      pass = false;
                                  }
                              }
                              else 
                              {
                                  if (!isDigit(c))
                                  {
                                      pass = false;
                                  }
                              }
                      }
  
                      return pass;
                  }
              
                  /*
                  Checking the (xxx)-xxx-xxxx format
                  */
                  function isBracketsAndDash(phone) 
                  {
                      if (phone.length != 13)
                          return false;
                      
                      var pass = true;
                                         
                      for (var i = 0;i &lt; phone.length; i++)
                      {
                          var c = phone.charAt(i);
                          var pos = i + 1;
                          if(i == 0)
                          {
                              if(c != '(')
                              {
                                  pass = false;
                              }
                          }
                          else if(i == 4)
                          {
                              if(c != ')')
                              {
                                  pass = false;
                              }
                          }       
                          else if(i == 8)
                              {
                                  if(c != '-')
                                  {
                                      pass = false;
                                  }
                              }
                              else 
                              {
                                  if (!isDigit(c))
                                  {
                                      pass = false;
                                  }
                              }
                      }
    
                      return pass; 
                  }  
                  
                  /*
                  Validate Zip is 5 digits and numerical
                  */
                  function isfiveDigits(zip)
                  {
          
                      if(zip.length != 5)
                          return false;
              
                      var pass = true;
  
                      for (var i = 0;i &lt; zip.length; i++)
                      {
                          var c = zip.charAt(i);
                          if (!isDigit(c))
                          {
                              pass = false;
                          }
                      }
  
                      return pass;
                  }
                  
                  function isDigit(num) 
                  {
                      if (num.length&gt;1)
                      {
                          return false;
                      }
                      
                      var string=&quot;1234567890&quot;;
                      
                      if (string.indexOf(num)!=-1)
                      {
                          return true;
                      }
                      return false;
                  }               
                  
              function printCaseRadio()
                  {
                      var tower;
                      
                      if (document.OrderForm.cases[0].checked)
                      {
                          tower = &quot;Desktop Case ($500) &lt;br /&gt;&quot;;
                      }
                      else if (document.OrderForm.cases[1].checked)
                          {
                              tower = &quot;Mini-Tower Case ($600) &lt;br /&gt;&quot;;
                          }
                          else if (document.OrderForm.cases[2].checked)
                              {
                                  tower = &quot;Full Tower Case ($700) &lt;br /&gt;&quot;;
                              }
                              else
                              {
                                  tower = &quot;No Case Selected &lt;br/&gt;&quot;
                              }
                      return tower;
                  }
              
              function printMonitorRadio()
                  {
                      var monitors;
                      
                      if (document.OrderForm.monitors[0].checked)
                      {
                          monitors = &quot;17inch LCD Flat Screen (250.00) &lt;br /&gt;&quot;;
                      }
                      else if (document.OrderForm.monitors[1].checked)
                          {
                              monitors = &quot;19inch LCD Flat Screen (300.00) &lt;br /&gt;&quot;;
                          }
                          else if (document.OrderForm.monitors[2].checked)
                              {
                                  monitors = &quot;21inch LCD Flat Screen (350.00) &lt;br /&gt;&quot;;
                              }
                              else 
                              {
                                  monitors = &quot;No Monitor Selected &lt;br/&gt;&quot;
                              }
                      return monitors;
                  }
          
          function printPrinterRadio()
              {
                  var printers;
                  
                  if (document.OrderForm.printers[0].checked)
                  {
                      printers = &quot;Inkjet Printer (100.00) &lt;br /&gt;&quot;;
                  }
                  else if (document.OrderForm.printers[1].checked)
                      {
                          printers = &quot;Laser Printer (250.00) &lt;br /&gt;&quot;;
                      }
                      else if (document.OrderForm.printers[2].checked)
                          {
                              printers = &quot;Laser Printer (250.00) &lt;br /&gt;&quot;;
                          }
                          else 
                          {
                              printers = &quot;No Printer Selected &lt;br/&gt;&quot;
                          }
                  
                  return printers;
              }   
  
          function doSubmit()
              {
              
                  /*
                  Submitting Dropdown selection
                  */
                  var ind = document.AddressForm.state.options.selectedIndex; 
                  var value = document.AddressForm.state.options[ind].value;
              
              
                  /* 
                  Checking the phone number is correct
                  */              
                  if(validatePhone()  == false)
                  {
                      var message = &quot;Phone number must be in one of the following formats:\n&quot;;
                      message += &quot;ddd-ddd-dddd\n&quot;;
                      message += &quot;dddddddddd\n&quot;;
                      message += &quot;(ddd)ddddddd\n&quot;;
                      message += &quot;(ddd)ddd-dddd&quot;;
          
                      alert(message);
                  }
                  
                  /* 
                  Checking the zip is correct
                  */
                  if(validateZip()  == false)
                  {
                      var message = &quot;Zip must be five digits and can only contain numbers&quot;;
          
                      alert(message);
                  }
                  
                  /* 
                  Checking the email is correct
                  */
      
                  if(validateEmail() == false)
                  {
                      var message = &quot;Email must contain @ except in the first and last position.&quot;;
                      alert(message);
                  }
                  
          
  
                  
                  
                  /* 
                  Checking that all validation steps work, prior to printing out detail
                  */                  
              
                  if (validateText() &amp;&amp; validateEmail()&amp;&amp;validatePhone()&amp;&amp; validateZip())
                  {
                      
                      var confirmation = &quot;&quot;;
                      var Namestring =  document.AddressForm.customer.value.charAt(0).toUpperCase()+document.AddressForm.customer.value.substring(1).toLowerCase();
                      var Citystring =  document.AddressForm.city.value.charAt(0).toUpperCase()+document.AddressForm.city.value.substring(1).toLowerCase();
                      
                      confirmation += &quot;Your order has been submitted.&lt;br /&gt;&lt;br /&gt;&quot;;
                      confirmation += &quot;Name: &quot; + Namestring + &quot;&lt;br /&gt;&quot;;
                      confirmation += &quot;Address: &quot; + document.AddressForm.address.value + &quot;&lt;br /&gt;&quot;;
                      confirmation += &quot;City: &quot; + Citystring + &quot;&lt;br /&gt;&quot;;
                      confirmation += &quot;State: &quot; + value + &quot;&lt;br /&gt;&quot;;
                      confirmation += &quot;Zip: &quot; + document.AddressForm.zip.value + &quot;&lt;br /&gt;&quot;;
                      confirmation += &quot;Phone: &quot; + document.AddressForm.phone.value + &quot;&lt;br /&gt;&quot;;
                      confirmation += &quot;Email: &quot; + document.AddressForm.email.value + &quot;&lt;br /&gt;&quot;;
                      
                      
                      var casepick = printCaseRadio();
                      
                      confirmation += casepick;
                      
                      var monitorpick = printMonitorRadio();
                      
                      confirmation += monitorpick;
                      
                      var printerpick = printPrinterRadio();
                      
                      confirmation += printerpick;
                      
                      confirmation += &quot;Total: &quot; + document.AddressForm.total.value + &quot;&lt;br /&gt;&quot;;
                      
                      document.write(confirmation);
                      
                      
                  }
                  return;
              }
          function getRadioValue(radioName)
          {
              for (var i = 0; i &lt; radioName.length; i++) 
              {
                  if (radioName[i].checked == true) 
                  {
                      return radioName[i].value;
                  }
              }
          }
          
          var caseIndex=0;
          function displayCase()
          {
              if (document.OrderForm.cases[0].checked = true)
              {
                  caseIndex=0;
              }
              else if (document.OrderForm.cases[0].checked = true)
                  {
                      caseIndex=1;
                  }
                  else if (document.OrderForm.cases[0].checked = true)
                  {
                      caseIndex=2;
                  }
              document.casepic.src = casePics[caseIndex];
          }
          
          var monitorIndex =0;
          function displayMonitor()
          {
              if (document.OrderForm.monitors[0].checked = true)
              {
                  monitorIndex =0;
              }
              else if (document.OrderForm.monitors[1].checked = true)
                  {
                      monitorIndex =1;
                  }
                  else if (document.OrderForm.monitors[2].checked = true)
                  {
                      monitorIndex =2;
                  }
                  document.monitorpic.src = monitorPics[monitorIndex];            
          }
          
          var printerIndex =0;
          function displayPrinter()
          {
              if (document.OrderForm.printers[0].checked = true)
              {
                  printerIndex =0;
              }
              else if (document.OrderForm.printers[1].checked = true)
                  {
                      printerIndex =1;
                  }
                  else if (document.OrderForm.printers[2].checked = true)
                  {
                      printerIndex =2
                  }
              document.printpic.src = printerPics[printerIndex];
          
          }
      
  
          function startup()
          {
          
              var casePics = new Array(3);
              casePics[0]= new Image;
              casepics[0].src = &quot;case1.jpg&quot;;
              casePics[1]= new Image;
              casepics[1].src = &quot;case2.jpg&quot;;
              casePics[2]= new Image;
              casepics[2].src = &quot;case3.jpg&quot;;
          
              var monitorPics = new Array(3);
              monitorPics[0]= new Image;
              monitorpics[0].src = &quot;monitor1.jpg&quot;;
              monitorPics[1]= new Image;
              monitorpics[1].src = &quot;monitor2.jpg&quot;;
              monitorPics[2]= new Image;
              monitorpics[2].src = &quot;monitor3.jpg&quot;;
          
              var printerPics = new Array(3);
              printerPics[0]= new Image;
              printerpics[0].src = &quot;printer1.jpg&quot;;
              printerPics[1]= new Image;
              printerpics[1].src = &quot;printer2.jpg&quot;;
              printerPics[2]= new Image;
              printerpics[2].src = &quot;printer3.jpg&quot;;
          
              displayCase();
              displayMonitor();
              displayPrinter();
          
          }
  &lt;/script&gt;
  </code></pre>
  
  <pre><code>&lt;body onLoad = &quot;startup()&quot; &gt;  
      &lt;h1 align=&quot;center&quot;&gt;Computer System Order Form&lt;/h1&gt;  
      &lt;table border=&quot;black&quot; cellpadding=&quot;10px&quot; align=&quot;center&quot;&gt;        
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;table cellpadding=&quot;10px&quot;&gt;
                  &lt;form name=&quot;OrderForm&quot;&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              Computer Case Style:&lt;/br&gt;
                              &lt;input type=&quot;radio&quot; name=&quot;cases&quot; value=&quot;500.00&quot; onchange=&quot;javascript:prices['cases'] = this.value; updateTotal();&quot; /&gt; Desktop Case (500.00) &lt;/br&gt;
                              &lt;input type=&quot;radio&quot; name=&quot;cases&quot; value=&quot;600.00&quot; onchange=&quot;javascript:prices['cases'] = this.value; updateTotal();&quot; /&gt; Mini-Tower Case (600.00) &lt;/br&gt;
                              &lt;input type=&quot;radio&quot; name=&quot;cases&quot; value=&quot;700.00&quot; onchange=&quot;javascript:prices['cases'] = this.value; updateTotal();&quot; /&gt; Full-Tower Case (700.00) &lt;/br&gt;
                          &lt;/td&gt;
                      
                          &lt;td&gt;
                              &lt;img name=&quot;casepic&quot; src=&quot;case1.jpg&quot; width=&quot;125&quot; height=&quot;125&quot;&gt;   
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  
                      &lt;tr&gt;
                          &lt;td&gt;
                              Computer Monitor: &lt;br/&gt;
                              &lt;input type=&quot;radio&quot; name=&quot;monitors&quot; value=&quot;250.00&quot; onchange=&quot;javascript:prices['monitors'] = this.value; updateTotal();&quot;  /&gt; 17&quot; LCD Flat Screen (250.00) &lt;/br&gt;
                              &lt;input type=&quot;radio&quot; name=&quot;monitors&quot; value=&quot;300.00&quot; onchange=&quot;javascript:prices['monitors'] = this.value; updateTotal();&quot;  /&gt; 19&quot; LCD Flat Screen (300.00) &lt;/br&gt;
                              &lt;input type=&quot;radio&quot; name=&quot;monitors&quot; value=&quot;350.00&quot; onchange=&quot;javascript:prices['monitors'] = this.value; updateTotal();&quot; /&gt; 21&quot; LCD Flat Screen (350.00) &lt;/br&gt;
                          &lt;/td&gt;
                      
                          &lt;td&gt;
                              &lt;img name=&quot;monitorpic&quot; src=&quot;monitor1.jpg&quot; width=&quot;125&quot; height=&quot;125&quot;&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  
                      &lt;tr&gt;
                          &lt;td&gt;
                              Computer Printer:&lt;br/&gt;
                              &lt;input type=&quot;radio&quot; name=&quot;printers&quot; value=&quot;100.00&quot; onchange=&quot;javascript:prices['printers'] = this.value; updateTotal();&quot;  /&gt; Inkjet Printer (100.00) &lt;/br&gt;
                              &lt;input type=&quot;radio&quot; name=&quot;printers&quot; value=&quot;250.00&quot; onchange=&quot;javascript:prices['printers'] = this.value; updateTotal();&quot; /&gt; Laser Printer (250.00) &lt;/br&gt;
                              &lt;input type=&quot;radio&quot; name=&quot;printers&quot; value=&quot;350.00&quot; onchange=&quot;javascript:prices['printers'] = this.value; updateTotal();&quot; /&gt; Color Printer (350.00) &lt;/br&gt;
                          &lt;/td&gt;
                     
                          &lt;td&gt;
                              &lt;img name=&quot;printpic&quot; src=&quot;printer1.jpg&quot; width=&quot;125&quot; height=&quot;125&quot;/&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/form&gt;
                  &lt;/table&gt;            
      
              &lt;/td&gt;
              
              &lt;td&gt;
                  &lt;table padding=&quot;10px&quot;&gt;
                      &lt;tr&gt;
                      &lt;form name=&quot;AddressForm&quot;&gt;
                          &lt;td&gt;
                              Total System Price:
                          &lt;/td&gt;
                          &lt;td&gt;
                              $&lt;input type=&quot;text&quot; name=&quot;total&quot; readonly value=&quot;0.00&quot; size=&quot;8&quot; id=&quot;total&quot;&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      
                      &lt;tr&gt;
                          &lt;td&gt;
                              &amp;nbsp;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      
                      &lt;tr&gt;
                          &lt;td&gt;
                              &amp;nbsp;
                          &lt;/td&gt;
                  
                      &lt;/tr&gt;
                      
                      &lt;tr&gt;
                          &lt;td&gt;
                              &amp;nbsp;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  
                      &lt;tr&gt;
                          &lt;td&gt;
                              Full Name:
                          &lt;/td&gt;
                          
                          &lt;td&gt;
                              &lt;input type=&quot;text&quot; name=&quot;customer&quot; /&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      
                      &lt;tr&gt;
                          &lt;td&gt;
                              Street Address:
                          &lt;/td&gt;
                      
                          &lt;td&gt;
                              &lt;input type=&quot;text&quot; name=&quot;address&quot; /&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      
                      &lt;tr&gt;
                          &lt;td&gt;
                              City:
                          &lt;/td&gt;
                          
                          &lt;td&gt;
                              &lt;input type=&quot;text&quot; name=&quot;city&quot; /&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      
                      &lt;tr&gt;
                          &lt;td&gt;
                              State:
                          &lt;/td&gt;
                          
                          &lt;td&gt;
                              &lt;select name=&quot;state&quot;&gt;
                                  &lt;option value=&quot;&quot;&gt;&lt;/option&gt;
                                  &lt;option value=&quot;DE&quot;&gt;DE&lt;/option&gt;
                                  &lt;option value=&quot;NJ&quot;&gt;NJ&lt;/option&gt;
                                  &lt;option value=&quot;NY&quot;&gt;NY&lt;/option&gt;
                                  &lt;option value=&quot;PA&quot;&gt;PA&lt;/option&gt;
                              &lt;/select&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  
                      &lt;tr&gt;
                          &lt;td&gt;
                              Zip:
                          &lt;/td&gt;
                          
                          &lt;td&gt;
                              &lt;input type=&quot;text&quot; name=&quot;zip&quot; /&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      
                      &lt;tr&gt;
                          &lt;td&gt;
                              Phone Number:
                          &lt;/td&gt;
                          
                          &lt;td&gt;
                              &lt;input type=&quot;text&quot; name=&quot;phone&quot; /&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      
                      &lt;tr&gt;
                      
                          &lt;td&gt;
                              Email Address:
                          &lt;/td&gt;
                          
                          &lt;td&gt;
                              &lt;input type=&quot;text&quot; name=&quot;email&quot;&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;/form&gt;
                  
                      &lt;tr&gt;
                          &lt;td&gt;
                              &amp;nbsp;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;input type=&quot;button&quot; value=&quot;Submit Order&quot; onClick=&quot;doSubmit()&quot; /&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;input type=&quot;button&quot; value=&quot;Clear Form&quot; onClick=&quot;doClear()&quot;  /&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;           
              &lt;/td&gt;       
          &lt;/tr&gt;   
      &lt;/table&gt;
              
  &lt;/body&gt; 
  </code></pre>