简单背景变更问题.. [英] Simple Background Change Issue..
问题描述
你好。
我想弄清楚为什么这不起作用......
< html> ;< head>< title> Prob.11< / title>
< script type =" text / javascript">
功能attachHandlers {
var the_opts = document.getElementsByTagName（" input"）;
for（var i = 0; i< the_opts。长度; i ++）{
if（（the_opts [i] .nodeName ==" input"）||
（the_opts [i] .nodeName ==" INPUT"））
{
the_opts [i] .onclick = changeBackground;
}
}
}，
函数changeBackground（evt）{
var purp_button = document.getElementById（" ; first_button"）;
var yellow_button = document.getElementById（" sec_button"）;
var pink_button = document.getElementById（" third_button"）;
var black_button = document.getElementById（" fourth_but ton"）;
var the_body = document.getElementsByTagName（" body"）;
if（！evt）
{
evt = event;
this_sel = evt.srcElement;
}
else
{
this_sel = evt.target;
}
if（this_sel = purp_button）
{
the_body.style.bgColor =" purple";
}
if（this_sel = yellow_button）
{
the_body.style.bgColor =" yellow";
}
if（this_sel = pink_button ）
{
the_body.style.bgColor =" pink";
}
if（this_sel = black_button）
{
the_body.style.bgColor =" black";
}
}
< / script>< / head>
< body bgColor =" blue" onLoad =" attachHandlers（）;">
< div class =" the_buttons">
< input type ="按钮"值= QUOT;紫色" id =" first_button">< br>
< input type =" button"值= QUOT;黄色" id =" sec_button">< br>
< input type =" button"值= QUOT;粉色" id =" third_button">< br>
< input type =" button"值= QUOT;黑色" id =" fourth_button">
< / div>
< / body>
< / html>
-
通过 http： //www.webmasterkb.com
Hello.
I''m trying to figure out why this isn''t working...
<html><head><title>Prob.11</title>
<script type="text/javascript">
function attachHandlers {
var the_opts=document.getElementsByTagName("input");
for (var i=0; i<the_opts.length; i++) {
if ((the_opts[i].nodeName=="input")||
(the_opts[i].nodeName=="INPUT"))
{
the_opts[i].onclick=changeBackground;
}
}
},
function changeBackground(evt){
var purp_button = document.getElementById("first_button");
var yellow_button = document.getElementById("sec_button");
var pink_button = document.getElementById("third_button");
var black_button = document.getElementById("fourth_button");
var the_body = document.getElementsByTagName("body");
if (!evt)
{
evt = event;
this_sel = evt.srcElement;
}
else
{
this_sel = evt.target;
}
if (this_sel=purp_button)
{
the_body.style.bgColor="purple";
}
if (this_sel=yellow_button)
{
the_body.style.bgColor="yellow";
}
if (this_sel=pink_button)
{
the_body.style.bgColor="pink";
}
if (this_sel=black_button)
{
the_body.style.bgColor="black";
}
}
</script></head>
<body bgColor="blue" onLoad="attachHandlers();">
<div class="the_buttons">
<input type="button" value="purple" id="first_button"><br>
<input type="button" value="yellow" id="sec_button"><br>
<input type="button" value="pink" id="third_button"><br>
<input type="button" value="black" id="fourth_button">
</div>
</body>
</html>
--
Message posted via http://www.webmasterkb.com
推荐答案
8月18日上午9：00 *，LayneMitch via WebmasterKB.com" < u39402 @ uwe>
写道：
On Aug 18, 9:00*am, "LayneMitch via WebmasterKB.com" <u39402@uwe>
wrote:
你好。
我是试图找出为什么这不起作用......
< html>< head>< title> Prob.11< / title>
Hello.
I''m trying to figure out why this isn''t working...
<html><head><title>Prob.11</title>
看起来像是家庭作业。 :-)
我建议你安装Firefox并安装Firebug插件以及
JSLint：
< URL： http：// www.w3.org/TR/html401/present...l#adef-bgcolor
>
>
< script type =" text / javascript">
function attachHandlers {
<script type="text/javascript">
function attachHandlers {
语法错误：函数声明必须有一个正式的参数列表
括在方括号（）中。如果没有参数，（）仍然需要
。
函数attachHandlers（）{
Syntax error: a function declaration must have a formal parameter list
enclosed in brackets (). If there are no parameters, the () are still
required.
function attachHandlers() {
>
var the_opts = document.getElementsByTagName（" input"）;
for（var i = 0; i< the_opts.length; i ++）{
* if（（the_opts [i] .nodeName ==" input"）||
* * *（the_opts [i] .nodeName ==" INPUT"））
>
var the_opts=document.getElementsByTagName("input");
for (var i=0; i<the_opts.length; i++) {
* if ((the_opts[i].nodeName=="input")||
* * * (the_opts[i].nodeName=="INPUT"))
没有必要用括号括起每个测试，它使代码
更难为我阅读。 HTML节点将按照惯例以大写字母的形式返回其名称
，XML节点可能会混合使用大写和小写。对于HTML
文档，建议使用不区分大小写的测试，例如：
if（the_opts [i] .nodeName.toLowerCase（）== 输入）{
There is no need to wrap each test in brackets, it makes the code
harder to read for me. HTML nodes will return their name in capitals
by convention, XML nodes might be mixed upper and lower. For HTML
documents it is recommended to use a case-insensitive test such as:
if ( the_opts[i].nodeName.toLowerCase() == "input" ) {
* {
* * the_opts [i] .onclick = changeBackground;
*}
*}
}，
* {
* * the_opts[i].onclick=changeBackground;
* }
*}
},
语法错误：删除逗号。
Syntax error: remove the comma.
>
函数changeBackground（evt）{
var purp_button = document.getElementById （" first_button"）;
var yellow_button = document.getElementById（" sec_button"）;
var pink_button = document.getElementById（" third_button"）;
var black_button = document.getElementById（" fourth_button"）;
var the_body = document.getElementsByTagName（" body"）;
>
function changeBackground(evt){
var purp_button = document.getElementById("first_button");
var yellow_button = document.getElementById("sec_button");
var pink_button = document.getElementById("third_button");
var black_button = document.getElementById("fourth_button");
var the_body = document.getElementsByTagName("body");
getElementsByTagName返回一个NodeList，有点像一个
数组。如果你想获得你想要的body元素的引用
列表中的第一个元素，那么：
var the_body = document.getElementsByTagName（" ; body"）[0];
getElementsByTagName returns a NodeList, which is a bit like an
array. If you want to get a reference to the body element you want
the first element in the list, so:
var the_body = document.getElementsByTagName("body")[0];
>
* if（！evt）
* {
* * evt = event;
* * this_sel = evt.srcElement;
*}
* else
* {
* * this_sel = evt.target;
*}
>
* if (!evt)
* {
* *evt = event;
* *this_sel = evt.srcElement;
* }
* else
* {
* *this_sel = evt.target;
* }
有更简洁的方法可以解析元素，即点击的
来源，检查档案。还要调查使用
这个关键字来传递听众的引用。
There are more concise methods of resolving the element that was the
source of the click, check the archives. Also investigate using the
this keyword to pass a reference from the listener.
>
* if（this_sel = purp_button）
>
* if (this_sel=purp_button)
我想你想要比较，而不是作业，所以：
if （this_sel == purp_button）
I think you wanted a comparison, not assignment, so:
if (this_sel == purp_button)
* * {
* * the_body.style.bgColor =" purple" ;;
* *{
* * the_body.style.bgColor="purple";
bgcolor（注释大写）属性已被删除，使用
backgroundColor。
< URL： http：// www。 w3.org/TR/html401/present...l#adef-bgcolor
>
>
等等。以上建议将使代码正常工作，还有很多其他改进可以做到。
-
Rob
And so on. The above suggestions will get the code working, there are
many other improvements that can be made.
--
Rob
RobG写道：
RobG wrote:
> 8月18日上午9:00，LayneMitch via WebmasterKB.com" < u39402 @ uwe>
写道：
>On Aug 18, 9:00 am, "LayneMitch via WebmasterKB.com" <u39402@uwe>
wrote:
>你好。
我想知道为什么这个不工作...
>Hello.
I''m trying to figure out why this isn''t working...
[引用文字剪辑 - 3行]
[quoted text clipped - 3 lines]
> var black_button = document .getElementById（" fourth_button"）;
var the_body = document.getElementsByTagName（" body"）;
>var black_button = document.getElementById("fourth_button");
var the_body = document.getElementsByTagName("body");
> getElementsByTagName返回一个NodeList，有点像
数组。如果你想获得你想要的body元素的引用
列表中的第一个元素，那么：
var the_body = document.getElementsByTagName（" body"） [0];
>getElementsByTagName returns a NodeList, which is a bit like an
array. If you want to get a reference to the body element you want
the first element in the list, so:
var the_body = document.getElementsByTagName("body")[0];
Damnit ......我已经知道了......但我想如果它只会去
无论如何都返回一个''body'，而不需要那个数组引用。
Damnit...I knew that already...But I thought that if it''s only going to
return one ''body'' anyway than there was no need for that array reference.
> if（！evt）
{
> if (!evt)
{
[引用文字剪辑 - 5行]
[quoted text clipped - 5 lines]
> this_sel = evt.target;
}
> this_sel = evt.target;
}
有更简洁的方法来解析作为点击源的元素，检查档案。同时调查使用
this关键字从侦听器传递引用。
There are more concise methods of resolving the element that was the
source of the click, check the archives. Also investigate using the
this keyword to pass a reference from the listener.
你是绝对正确的。事实上，我首先要使用
''事件监听器'来解决这个问题。 JavaScript参考文件是由
给我的，一本专注于事件监听器的书。我选择使用
事件处理程序，因为这是我的第一本书教给我的。但感谢
的建议，我会继续探索其他解决方案。
You''re absolutely right. In fact, I was going to solve this problem by using
''event listeners'' at first. The JavaScript reference file was given to me by
a book that focuses on event listeners. I chose to go this route of using
event handlers because this is what my first book taught me. But thanks for
the suggestion, I''ll continue to explore other solutions.
>
>
> if（this_sel = purp_button）
> if (this_sel=purp_button)
我想你想要比较，而不是作业，所以：
if（this_sel == purp_button）
I think you wanted a comparison, not assignment, so:
if (this_sel == purp_button)
业余编码错误（我确实是业余爱好者）。
Amateur coding mistake (I''m indeed an amateur).
>
>
> {
the_body.style.bgColor =" purple" ;;
> {
the_body.style.bgColor="purple";
bgcolor（注释大写）属性已被删除，使用
backgroundColor。
The bgcolor (note capitalisation) attribute has been depricated, use
backgroundColor.
我在第一次使用backgroundColor时做了，并认为这是问题所在。我会
肯定会回去。
I did at first use backgroundColor, and thought that was the problem. I''ll
definitely go back.
>
< URL： http://www.w3.org/TR/html401/present...l#adef-bgcolor
等等。以上建议将使代码正常工作，还有许多其他改进可以做到。
>
<URL: http://www.w3.org/TR/html401/present...l#adef-bgcolor
And so on. The above suggestions will get the code working, there are
many other improvements that can be made.
>>
< html>< head>< title> Prob.11< / title>
>>
<html><head><title>Prob.11</title>
看起来像是家庭作业。 :-)
Looks like homework to me. :-)
大声笑。我正在自学这个。我创建了一个21问题测试。到目前为止一直很好。
非常感谢您的回复。
Lol. I''m learning this on my own. I created a 21 problem test. So far so good.
Thanks alot for the response.
> -
Rob
>--
Rob
-
通过 http://www.webmasterkb.com 发布消息
RobG：
RobG :
LayneMitch通过WebmasterKB.com：
LayneMitch via WebmasterKB.com :
> var the_opts = document.getElementsByTagName（" input"）;
for（var i = 0; i< the_opts.length; i ++）{
if （（the_opts [i] .nodeName ==" input"）||
（the_opts [i] .nodeName ==" INPUT"））
>var the_opts=document.getElementsByTagName("input");
for (var i=0; i<the_opts.length; i++) {
if ((the_opts[i].nodeName=="input")||
(the_opts[i].nodeName=="INPUT"))
没有必要将每个测试包装在括号中，这使得代码更难以为我阅读。 HTML节点将按照惯例以大写字母的形式返回其名称
，XML节点可能会混合使用大写和小写。对于HTML
文档，建议使用不区分大小写的测试，例如：
if（the_opts [i] .nodeName.toLowerCase（）== " input"）{
There is no need to wrap each test in brackets, it makes the code
harder to read for me. HTML nodes will return their name in capitals
by convention, XML nodes might be mixed upper and lower. For HTML
documents it is recommended to use a case-insensitive test such as:
if ( the_opts[i].nodeName.toLowerCase() == "input" ) {
任何提示，如果有偏好使用.toLowerCase（）而不是
..toUpperCase（） ？我通常使用.toUpperCase（）。
但是，我的意思是，因为HTML约定是返回大写的
版本和XML格式的混合版本似乎更常用大写的
版本。是否更好（在性能和可靠性方面）
小写或大写？或者只是不在乎。情况，并且
两种选择都是等价的？
我希望我的坏英语不是一个提示的问题。谢谢。
-
laurent
Any hint if there is a preference to use .toLowerCase() instead of
..toUpperCase() ? I use .toUpperCase() usually.
But, I mean, since the HTML convention is to return a capitalized
version and a mixed one in XML it seems more often in capitalized
version. Is it better (in performance and reliability terms) to go
lowercase or uppercase ? Or is it just a "don''t care" situation, and
both choices are equivalents ?
I hope my bad english is not an issue to get a hint. Thanks.
--
laurent
这篇关于简单背景变更问题..的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
