0

As the title says, my project works fine in JSfiddle but not when I run it in Google Chrome with Aptana. I am very new to Javascript and am just learning about JQuery, so that might have something to do with it. However, it still doesn't make sense that it would work in JSfiddle and not in the browser. FYI, this is for a homework assignment, and the teacher gave us the original HTML file. The file is pretty poor - it uses inline styles and deprecated attributes. I can't tell if he gave us a bad file on purpose or if he doesn't know what he's doing - either way, the HTML might also have something to do with the problem. Any help is appreciated. Thank you.

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Castaway Vacations, LLC</title>
<script src="castaway.js"></script>
</head>
<body leftmargin=0 rightmargin=0 bgcolor=#ffcc99 
text=#993300 link=#993300 vlink=#996633>
<br>
<table width=100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=95% align="right" bgcolor=#ffffff>
<img src="castaway_logo.jpg">
<br>
<font face=arial>Vacations, LLC</font></td>
<td bgcolor=#ffffff>&nbsp;</td>  
</tr>
</table>
<br><br>
<div align="center">
<table width=600>
<tr>
<td width=300 valign="top">
   <font face=arial size=3><b><i>Select Mood...</i></b></font><br><br>
   <font face=arial>
   <a id="one" href="#">Romantic</a><br><br>
   <a id="two" href="#">Adventure</a><br><br>
   <a id="three" href="#">Relaxation</a><br><br>
   <a id="four" href="#">Family</a><br><br><br><br>
   <a href="#">Request A Brochure...</a>
   </font>
</td>
<td align="center"><img id="original.jpg" src="orig_main.jpg">
<br><i>Your Vacation Awaits!
</tr>
</center>
</body>
</html>
</DOCTYPE>

Javascript:

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";
}

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);

There was no CSS for this project.

JSfiddle link: http://jsfiddle.net/HappyHands31/twkm12r2/

The idea for the project is to use javascript to change font color and photo by clicking on the various links. More in-depth here: Change Text Color, Hyperlink Color, and Image With Javascript

Community
  • 1
  • 1
HappyHands31
  • 4,001
  • 17
  • 59
  • 109
  • 1
    Would you please share fiddle link if it works in jsfiddle – Voonic Oct 14 '15 at 05:14
  • 1
    Works like a charm? http://jsfiddle.net/61f4hos5/ – Joakim M Oct 14 '15 at 05:15
  • Here sorry: http://jsfiddle.net/HappyHands31/twkm12r2/ – HappyHands31 Oct 14 '15 at 05:16
  • 1
    Also have a look at [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/q/14028959/218196) for more general information. – Felix Kling Oct 14 '15 at 05:24
  • That fixed my problem. Thank you. – HappyHands31 Oct 14 '15 at 05:41
  • Really not a duplicate question by the way - this question has nothing to do with relating javascript functions back to html elements with IDs as my previous question(s) did. This question has everything to do with the adding elements to the DOM script in the correct order so that they're recognized. – HappyHands31 Oct 14 '15 at 05:50
  • @Felix King I'm still having issues with my previous question, "Change Text Color, Hyperlink Color, and Image With Javascript". I've gotten the text to change, but the hyperlinks aren't changing. Is there a way for me to post this question without it being marked as a "Duplicate"? You can see my attempted revisions at the original post: http://stackoverflow.com/questions/33115033/javascript-function-that-changes-text-color-hyperlink-color-and-image – HappyHands31 Oct 14 '15 at 18:06

1 Answers1

1

Make sure that castaway.js file path is in same folder as your html file is saved. I have tried your code and working fine in chrome browser.

Page After clicking on other link

Sarjan Desai
  • 3,683
  • 2
  • 19
  • 32