可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

This question already has an answer here:

Javascript Function that changes Text Color, Hyperlink Color, and Image 1 answer

For my assignment, I need to use javascript to change the text color, hyperlink color, and image on this page:

The idea is that when a user clicks "Romantic", the text "Select Mood...", "Your Vacation Awaits!", and "Vacations, LLC" will change to red (more red than they already are), when a user clicks "Adventure", the text will change to blue, etc. Also, the picture will change, along with the color of the hyperlinks. Unfortunately, our teacher only gave us an html file, and it's pretty terrible - inline styles, no use of CSS, etc. I don't know if he sent us a bad file on purpose or if he just doesn't know what he's doing. Here is my 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 onClick="change_color();" href="#">Romantic</a><br><br>
   <a onClick="change_color2();" href="#">Adventure</a><br><br>
   <a onClick="change_color3();" href="#">Relaxation</a><br><br>
   <a onClick="change_color4();" href="#">Family</a><br><br><br><br>
   <a href="#">Request A Brochure...</a>
   </font>
</td>
<td align="center"><img id="rom_main.jpg" src="orig_main.jpg">
<br><i>Your Vacation Awaits!
</tr>
</center>
</body>
</html>
</DOCTYPE>

And my javascript:

function change_color(){
   document.body.style.color = "red";
   document.getElementById("orig_main.jpg").src = "rom_main.jpg";
}

function change_color2(){
   document.body.style.color = "blue";
   document.getElementById("orig_main.jpg").src = "adv_main.jpg";
}

function change_color3(){
   document.body.style.color = "green";
   document.getElementById("orig_main.jpg.jpg").src = "rel_main.jpg";
}

function change_color4(){
   document.body.style.color = "orange";
   document.getElementById("orig_main.jpg").src = "fam_main.jgp";
}

As you can see I tried to create four separate functions for when the user clicks on the different links, but nothing is happening. I'm pretty new at javascript and don't really know what I'm doing, so any help or advice is appreciated. Thank you.

JSFiddle Link - demo

回答1:

You should be leveraging event listeners. I just included the color change for demonstration, but add your logic in the now firing functions. For simplicity, I added id's to your <a> elements of one, two, etc, but you can get a handle on these elements various ways. Observe the following...

<a id="one" href="#">Romantic</a>

document.getElementById('one').addEventListener('click', function() {
    document.body.style.color = 'red';
    [...]
});

JSFiddle Link - event listener demo

Check out some addEventListener() resources for more information.

note - in your current fiddle, framework options => "No wrap in <body>" - will work just fine - but it's not promoting best practice.

JSFiddle Link - your demo with correctly loaded scripts

JSFiddle framework documentation - no wrap?

回答2:

You've got the wrong selector.

document.getElementById("orig_main.jpg")

is going to look for an element in your html with the id of "orig_main.jpg" but that's the src of the images so javascript can't find anything. The id you're trying to target on your html is written as "rom_main.jpg" (which is an awful id). IDs ideally (heh) should describe the element in some way, not the file name.

回答3:

It should be ok:

function change_color() {
  document.body.style.color = "red";
  document.getElementById("rom_main.jpg").src = "rom_main.jpg";
}

function change_color2() {
  document.body.style.color = "blue";
  document.getElementById("rom_main.jpg").src = "adv_main.jpg";
}

function change_color3() {
  document.body.style.color = "green";
  document.getElementById("rom_main.jpg").src = "rel_main.jpg";
}

function change_color4() {
  document.body.style.color = "orange";
  document.getElementById("rom_main.jpg").src = "fam_main.jgp";
}

<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 onClick="change_color();" href="#">Romantic</a><br><br>
          <a onClick="change_color2();" href="#">Adventure</a><br><br>
          <a onClick="change_color3();" href="#">Relaxation</a><br><br>
          <a onClick="change_color4();" href="#">Family</a><br><br><br><br>
          <a href="#">Request A Brochure...</a>
          </font>
        </td>
        <td align="center">
          <img id="rom_main.jpg" src="orig_main.jpg">
          <br><i>Your Vacation Awaits!
       </tr>
       </center>
       
          
       
       </body>
       </html>