使用Javascript更改文本颜色，超链接颜色和图像 [英] Change Text Color, Hyperlink Color, and Image With Javascript
问题描述
对于我的任务，我需要使用javascript来更改此页面上的文本颜色，超链接颜色和图像：
这个想法是，当用户点击Romantic时，文本Select Mood ...，Your Vacation Awaits！和Vacations，LLC将变为红色（更多红色当用户点击冒险时，文本将变成蓝色等。此外，图片将随着超链接的颜色而改变。不幸的是，我们的老师只给了我们一个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 =rightbgcolor =＃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> < />< / b>< / font>< br>
< font face = arial>
< a href =＃>索取宣传册...< / a>
< / font>
< / td>
< td align =center>< img id =rom_main.jpgsrc =orig_main.jpg>
< br>< i>您的假期等待着！
< / 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;
$ b 正如你所看到的，我试图为用户点击时创建四个单独的函数在不同的环节上，但没有任何事情发生。我很新的JavaScript，并不真正知道我在做什么，所以任何帮助或建议表示赞赏。谢谢。
JSFiddle Link - 演示
解决方案您应该利用事件监听器。我只是在演示中加入了颜色变化，但在现在触发功能中添加了您的逻辑。为了简单起见，我将id添加到< code>< code>< c $ c> / code>等，但您可以掌握这些元素方法。观察以下内容......
< a id =onehref =＃>浪漫< / a&
document .getElementById（'one'）。addEventListener（'click'，function（）{
document.body.style.color ='red';
[...]
}）;
JSFiddle Link - 事件监听器演示
查看一些
注意
strong> - 在当前的小提琴中，框架选项=>不包裹在< body>中 - 将会工作得很好 - 但它不会促进最佳做法。
JSFiddle Link - 使用正确加载脚本的演示程序
JSFiddle框架文档 - 无法打包？
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> </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
解决方案 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?
这篇关于使用Javascript更改文本颜色，超链接颜色和图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
