Question

对于我的作业，我需要使用javascript来更改此页面上的文本颜色，超链接颜色和图像：

这个想法是，当用户点击“浪漫”时，文字“选择情绪......”，“你的假期等待！”和“假期，有限责任公司”将变为红色（比现在更红），当用户点击“冒险”时，文本将变为蓝色等。此外，图片将随着超链接的颜色而改变。不幸的是，我们的老师只给了我们一个html文件，它非常可怕 - 内联样式，没有使用CSS等。我不知道他是故意给我们发错文件还是他不知道他是什么这样做。这是我的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>

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

正如您所看到的，当用户点击不同的链接时，我尝试创建四个单独的功能，但没有发生任何事情。我是javascript的新手，并不知道我在做什么，所以任何帮助或建议都表示赞赏。谢谢。

JSFiddle Link - 演示

Answer 1

你的选择器错了。

document.getElementById("orig_main.jpg")

将在你的html中寻找一个id为“orig_main.jpg”的元素，但这是图像的src，所以javascript找不到任何东西。你试图在你的html上定位的id被写成“rom_main.jpg”（这是一个非常糟糕的id）。理想情况下ID（heh）应该以某种方式描述元素，而不是文件名。

Answer 2

你应该利用event listeners。我只是为演示添加了颜色更改，但在 now 触发功能中添加了您的逻辑。为简单起见，我在<a>，one等two元素中添加了ID，但您可以通过各种方式对这些元素进行get a handle。请注意以下内容......

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

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

JSFiddle Link - 事件监听器演示

查看一些addEventListener()资源以获取更多信息。

注意 - 在你当前的小提琴中，框架选项=＆gt; ＆＃34;没有包装在＆lt; body＆gt;＆＃34; - 工作得很好 - 但它没有推广最佳实践。

JSFiddle Link - 正确加载脚本的演示

JSFiddle framework documentation - 没有换行？

Answer 3

应该没问题：

＆＃13;

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

＆＃13;

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

＆＃13;

使用Javascript

3 个答案: