title: Javascript Function that changes Text Color, Hyperlink Color, and Image
body: <p><a href="https://i.stack.imgur.com/9gyOy.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9gyOy.jpg" alt="enter image description here"></a></p>
  
  <p>Hi, </p>
  
  <p>I need help with a class assignment. We were given an HTML file for a pretend business, "Castaway Vacations LLC". The first step in the assignment is to create a javascript function that changes the Text Color, Hyperlink Color, and Image when a particular link is clicked. So when the "Romantic" link is clicked, for example, the text that reads "Select Mood" will change to red, along with all other text on the page (including the other hyperlinks). Clicking this link will also change the image. One thing that's tricky about the file that our teacher sent is that there isn't a matching CSS file - I created one myself that contains the class colors, but besides that, all the other styles are inline, which I'm not used to. Here is the JSfiddle link to my code: </p>
  
  <p><strong>UPDATE!</strong></p>
  
  <p>I've gotten the code down for changing text color and image, but the hyperlink colors still aren't changing. You can see my attempt at changing them with the function named colorLinks in the updated javascript. Unfortunately, not only does this function not work, it's also causing the previous (good) functions to not work as well. Thanks for your help.  </p>
  
  <p><a href="http://jsfiddle.net/HappyHands31/twkm12r2/1/" rel="nofollow noreferrer">http://jsfiddle.net/HappyHands31/twkm12r2/1/</a></p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Castaway Vacations, LLC&lt;/title&gt;
  &lt;/head&gt;
  &lt;body leftmargin=0 rightmargin=0 bgcolor=#ffcc99 
  text=#993300 link=#993300 vlink=#996633&gt;
  
  &lt;br&gt;
  &lt;table width=100% border=0 cellpadding=0 cellspacing=0&gt;
  &lt;tr&gt;
  &lt;td width=95% align="right" bgcolor=#ffffff&gt;
  &lt;img src="castaway_logo.jpg"&gt;
  &lt;br&gt;
  &lt;font face=arial&gt;Vacations, LLC&lt;/font&gt;&lt;/td&gt;
  &lt;td bgcolor=#ffffff&gt;&amp;nbsp;&lt;/td&gt;  
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;div align="center"&gt;
  &lt;table width=600&gt;
  &lt;tr&gt;
  &lt;td width=300 valign="top"&gt;
     &lt;font face=arial size=3&gt;&lt;b&gt;&lt;i&gt;Select Mood...&lt;/i&gt;&lt;/b&gt;&lt;/font&gt;&lt;br&gt;&lt;br&gt;
     &lt;font face=arial&gt;
     &lt;a id="one" href="#"&gt;Romantic&lt;/a&gt;&lt;br&gt;&lt;br&gt;
     &lt;a id="two" href="#"&gt;Adventure&lt;/a&gt;&lt;br&gt;&lt;br&gt;
     &lt;a id="three" href="#"&gt;Relaxation&lt;/a&gt;&lt;br&gt;&lt;br&gt;
     &lt;a id="four" href="#"&gt;Family&lt;/a&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
     &lt;br&gt;
     &lt;a href="#"&gt;Request A Brochure...&lt;/a&gt;
     &lt;/font&gt;
  &lt;/td&gt;
  &lt;td align="center"&gt;&lt;img id="original.jpg" src="orig_main.jpg"&gt;
  &lt;br&gt;   &lt;i&gt;Your Vacation Awaits!
  
  &lt;/tr&gt;
  &lt;/center&gt;
  &lt;script src="castaway.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  &lt;/DOCTYPE&gt;
  </code></pre>
  
  <p>Javascript: </p>
  
  <pre><code>document.getElementById('one').addEventListener
  ('click', change_color);
  document.getElementById('two').addEventListener
  ('click', change_color2);                                                               
  document.getElementById('three').addEventListener
  ('click', change_color3);
  document.getElementById('four').addEventListener
  ('click', change_color4);
  
  function change_color(){
    document.body.style.color = "red";
    document.getElementById("original.jpg").src = "rom_main.jpg";
  }
  
  function change_color2(){
    document.body.style.color = "blue";
    document.getElementById("original.jpg").src = "adv_main.jpg";
  }
  
  function change_color3(){
    document.body.style.color = "green";
    document.getElementById("original.jpg").src = "rel_main.jpg";
  }
  
  function change_color4(){
    document.body.style.color = "orange";
    document.getElementById("original.jpg").src = "fam_main.jgp";
  }
  
  colorLinks ("#00FF00");
  
  function colorLinks (hex)
  
  var links = document.getElementsByTagName("a");
  for(var i=0;i&lt;links.length;i++)
  {
        if(links[i].href)
        {
            links[i].style.color = "red";  
        }
  }
  </code></pre>
  
  <p>Thank you!</p>