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 10  1232 
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...
<html><head><title>Prob.11</title>
Looks like homework to me. :-)
I suggest you get Firefox and install the Firebug add-on as well as
JSLint:
<URL: http://www.w3.org/TR/html401/present...l#adef-bgcolor
>
<script type="text/javascript">
function 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"))
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;
* }
*}
},
Syntax error: remove the comma.
>
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 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;
* }
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)
I think you wanted a comparison, not assignment, so:
if (this_sel == purp_button)
* *{
* * the_body.style.bgColor="purple";
The bgcolor (note capitalisation) attribute has been depricated, use
backgroundColor.
<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.
--
Rob
RobG wrote:
>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...
[quoted text clipped - 3 lines]
>var black_button = document.getElementById("fourth_button");
var the_body = document.getElementsByTagName("body");
>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...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)
{
[quoted text clipped - 5 lines]
> 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.
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)
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 bgcolor (note capitalisation) attribute has been depricated, use
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
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>
Looks like homework to me. :-)
Lol. I'm learning this on my own. I created a 21 problem test. So far so good.
Thanks alot for the response.
>--
Rob
--
Message posted via http://www.webmasterkb.com
RobG :
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"))
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" ) {
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
On Aug 17, 10:24*pm, Laurent vilday <mok...@mokhet.comwrote:
RobG :
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"))
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" ) {
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
I don't know for certain about javascript, but in java there are
certain characters (i.e.
the german sz-ligature (ß)) where converting to uppercase may be
slightly more
complicated than you'd think, so to make unsigned comparisons you
should
convert to lower case. I use toLowerCase for this reason.
Can I make a coding preference suggestion?
Too bad, I'ma do it anyway! :D
for (var i=0; i<the_opts.length; i++) {
for (var i=0, il=the_opts.length; i<il; i++){
>
* if ((the_opts[i].nodeName=="input")||
* * * (the_opts[i].nodeName=="INPUT"))
if (the_opts[i].nodeName.toLowerCase() == "input"){
var opt = the_opts[i]; //for maintainability
opt.onclick=changeBackground;
>
* if (!evt)
* {
* *evt = event;
* *this_sel = evt.srcElement;
* }
* else
* {
* *this_sel = evt.target;
* }
// to save space
evt = evt || event;
this_sel = evt.srcElement || 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";
* *}
}
// you check this_sel way too many times -- it's only going to be one
option, right? Either use "else if" or...
switch (this_sel){
case purp_button:
the_body.style.backgroundColor = "black";
break;
case yellow_button:
the_body.style.backgroundColor = "yellow";
break;
case pink_button:
the_body.style.backgroundColor = "pink";
break;
case black_button:
the_body.style.backgroundColor = "black";
break;
default:
the_body.style.backgroundColor = "#036";
break;
}
A couple reasons I felt it necessary to do this: 1) For others to
check and argue my coding practices and make sure I'm doing it the
most efficiently/effectively, and 2) in checking whether I'm doing it
the most efficiently/effectively, it may teach you something as well.
Don't take it as a slam -- I'm not "correcting" you, just "schooling"
you. ;)
-Kevin
Tom Cole wrote:
On Aug 17, 10:24 pm, Laurent vilday <mok...@mokhet.comwrote:
>RobG :
>>if ( the_opts[i].nodeName.toLowerCase() == "input" ) {
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.
[...]
I don't know for certain about javascript, but in java there are certain
characters (i.e. the german sz-ligature (ß)) where converting to
uppercase may be slightly more complicated than you'd think,
There is no uppercase character for the "ß" in German; "SS" is only a crude
equivalent for it which fails a test of legibility with many words. In
other languages (like French), certain characters (like "é") maybe
uppercased (here: É) but they may not appear as such on the beginning of a
sentence.
so to make unsigned comparisons you should convert to lower case. I use
toLowerCase for this reason.
I don't think that's not a sound reason. One could be that uppercase
characters appear less often in a standard text, and therefore converting
everything to lowercase is probably more efficient.
PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16
Thomas 'PointedEars' Lahn wrote:
Tom Cole wrote:
>so to make unsigned comparisons you should convert to lower case. I use
toLowerCase for this reason.
I don't think that's not a sound reason. [...]
^^^
D'oh, ignore the "not".
PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>
Beez wrote:
>Can I make a coding preference suggestion?
Too bad, I'ma do it anyway! :D
>for (var i=0; i<the_opts.length; i++) {
for (var i=0, il=the_opts.length; i<il; i++){
> if ((the_opts[i].nodeName=="input")||
(the_opts[i].nodeName=="INPUT"))
if (the_opts[i].nodeName.toLowerCase() == "input"){
var opt = the_opts[i]; //for maintainability
opt.onclick=changeBackground;
> if (!evt)
{
[quoted text clipped - 5 lines]
> this_sel = evt.target;
}
// to save space
evt = evt || event;
this_sel = evt.srcElement || evt.target;
> if (this_sel=purp_button)
{
[quoted text clipped - 17 lines]
>>
}
// you check this_sel way too many times -- it's only going to be one
option, right? Either use "else if" or...
switch (this_sel){
case purp_button:
the_body.style.backgroundColor = "black";
break;
case yellow_button:
the_body.style.backgroundColor = "yellow";
break;
case pink_button:
the_body.style.backgroundColor = "pink";
break;
case black_button:
the_body.style.backgroundColor = "black";
break;
default:
the_body.style.backgroundColor = "#036";
break;
}
A couple reasons I felt it necessary to do this: 1) For others to
check and argue my coding practices and make sure I'm doing it the
most efficiently/effectively, and 2) in checking whether I'm doing it
the most efficiently/effectively, it may teach you something as well.
Don't take it as a slam -- I'm not "correcting" you, just "schooling"
you. ;)
-Kevin
Oh man...Absolutely!...I've only been learning JavaScript for about five
months. So I'm still new.
I've run across the 'switch/case' conditional statements in one of my books
and planned to use it later. Thanks for all of the suggestions. I've solved
the problem already. Here's the resulting code:
<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.toLowerCase()=="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")[0];
if (!evt)
{
evt = event;
this_sel=evt.srcElement;
}
else
{
this_sel=evt.target;
}
if (this_sel==purp_button)
{
the_body.style.backgroundColor="purple";
}
if (this_sel==yellow_button)
{
the_body.style.backgroundColor="yellow";
}
if (this_sel==pink_button)
{
the_body.style.backgroundColor="pink";
}
if (this_sel==black_button)
{
the_body.style.backgroundColor="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 WebmasterKB.com http://www.webmasterkb.com/Uwe/Forum...cript/200808/1
Thomas 'PointedEars' Lahn wrote:
There is no uppercase character for the "ß" in German;
Actually, yes, there is. See
<URL:http://de.wikipedia.org/wiki/Großes_ß>. However, for the time
being, the standard uppercasing rule will remain "SS", for compatibility.
--
John W. Kennedy
"But now is a new thing which is very old--
that the rich make themselves richer and not poorer,
which is the true Gospel, for the poor's sake."
-- Charles Williams. "Judgement at Chelmsford"
John W Kennedy wrote:
Thomas 'PointedEars' Lahn wrote:
>There is no uppercase character for the "ß" in German;
Actually, yes, there is. See
<URL:http://de.wikipedia.org/wiki/Großes_ß>. However, for the time
being, the standard uppercasing rule will remain "SS", for compatibility.
Yes, that is a rather new development that I was informed only about two
days ago (when voting on the use of "ss" instead of "ß" in the Swiss German
Wikipedia). But I have yet to see a capital "ß" anywhere in a German text,
and U+1E9E supported by a standard font.
PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Tony LaPaso |
last post by:
Hi All,
I have a simple style sheet example below and I'm seeing different
results in IE 6 vs. Firefox 1.0.3. I'm not sure which browser is
rendering it correctly but I'm tending to think it's...
|
by: LRW |
last post by:
Having a problem getting a onSubmit function to work, to where it popsup a
confirmation depending on which radiobutton is selected.
Here's what I have:
function checkdel() {
if...
|
by: proximus |
last post by:
Hi,
I am trying to change the background of table TD's. The problem is that
I have no access to the HTML code. SO I am trying to alter this using
Javascript/DOM in an external .js file.
I...
|
by: J. B. Moreno |
last post by:
I read the faq, and it mentions that IE 4 on windows requires setting a
printing option to allow background colors to be printed.
Things change, life goes on, other browsers come into...
|
by: Steven |
last post by:
Hello,
First, let me state that I am trying to learn asp.net, so I am a beginner.
Now on to the issue. I have a webform with a single Textbox and a
FileSystemWatcher monitoring a directory for...
|
by: mikl |
last post by:
How do you change the overall background color for a tab
control (not on each individual tab).
I tried Tabcontrol1.Backcolor = System.Drawing.Color.Blue
but this did not work.
Thanks
mikl
|
by: Rhino |
last post by:
I've been updating some CSS today and got one odd error from the validator
at http://jigsaw.w3.org/css-validator/. Every time I had 'background:
transparent;' (or background-color: transparent;)...
|
by: serge calderara |
last post by:
Dear all,
I have a webform with a calendar control on it. When loaded the calendar is
set to the current date. Depending on a criteria from a database field,
calendar day cell appears with red...
|
by: lovely_angel_for_you |
last post by:
Hi,
I have following link. By visitng first in IE, and then in Firefox, you
would get to know my issue.
http://lovely.angel.for.you.googlepages.com/test.htm...
|
by: Haines Brown |
last post by:
A minor issue. When I try to validate a CSS line, I get an error.
The line inside the style for a div is
background-color: #FFFBF0;
The warning (jigsaw.w3.org) is:
Line : 54 (Level : 1)...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome former...
|
by: ryjfgjl |
last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
|
by: taylorcarr |
last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
| |
