Simple Background Change Issue..

**RobG** · Aug 17 '08, 11:45 PM

Re: Simple Background Change Issue..

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

>

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=docume nt.getElementsB yTagName("input ");
>
for (var i=0; i<the_opts.leng th; i++) {
>
if ((the_opts[i].nodeName=="inp ut")||
(the_opts[i].nodeName=="INP UT"))

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.toLow erCase() == "input" ) {

{
the_opts[i].onclick=change Background;
}
}
>
},

Syntax error: remove the comma.

>
function changeBackgroun d(evt){
>
var purp_button = document.getEle mentById("first _button");
var yellow_button = document.getEle mentById("sec_b utton");
var pink_button = document.getEle mentById("third _button");
var black_button = document.getEle mentById("fourt h_button");
var the_body = document.getEle mentsByTagName( "body");

getElementsByTa gName 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.getEle mentsByTagName( "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

**LayneMitch via WebmasterKB.com** · Aug 18 '08, 12:05 AM

Re: Simple Background Change Issue..

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.getEle mentById("fourt h_button");
>var the_body = document.getEle mentsByTagName( "body");

>getElementsByT agName 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.getEle mentsByTagName( "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
>backgroundColo r.

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

**Laurent vilday** · Aug 18 '08, 02:25 AM

Re: Simple Background Change Issue..

RobG :

LayneMitch via WebmasterKB.com :

>var the_opts=docume nt.getElementsB yTagName("input ");
>>
>for (var i=0; i<the_opts.leng th; i++) {
>>
> if ((the_opts[i].nodeName=="inp ut")||
> (the_opts[i].nodeName=="INP UT"))

>
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.toLow erCase() == "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

**Tom Cole** · Aug 18 '08, 11:25 AM

Re: Simple Background Change Issue..

On Aug 17, 10:24 pm, Laurent vilday <mok...@mokhet. comwrote:

RobG :
>

LayneMitch via WebmasterKB.com :

var the_opts=docume nt.getElementsB yTagName("input ");

>

for (var i=0; i<the_opts.leng th; i++) {

>

if ((the_opts[i].nodeName=="inp ut")||
(the_opts[i].nodeName=="INP UT"))

>

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.toLow erCase() == "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.

**Beez** · Aug 18 '08, 03:55 PM

Re: Simple Background Change Issue..

Can I make a coding preference suggestion?

Too bad, I'ma do it anyway! :D

for (var i=0; i<the_opts.leng th; i++) {

for (var i=0, il=the_opts.len gth; i<il; i++){

>
if ((the_opts[i].nodeName=="inp ut")||
(the_opts[i].nodeName=="INP UT"))

if (the_opts[i].nodeName.toLow erCase() == "input"){
var opt = the_opts[i]; //for maintainability
opt.onclick=cha ngeBackground;

>
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=yello w_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

**Thomas 'PointedEars' Lahn** · Aug 19 '08, 10:25 PM

Re: Simple Background Change Issue..

Tom Cole wrote:

On Aug 17, 10:24 pm, Laurent vilday <mok...@mokhet. comwrote:

>RobG :

>>if ( the_opts[i].nodeName.toLow erCase() == "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 bugRiddenCrashP ronePieceOfJunk = (
navigator.userA gent.indexOf('M SIE 5') != -1
&& navigator.userA gent.indexOf('M ac') != -1
) // Plone, register_functi on.js:16

**Thomas 'PointedEars' Lahn** · Aug 19 '08, 10:25 PM

Re: Simple Background Change Issue..

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>

**LayneMitch via WebmasterKB.com** · Aug 20 '08, 12:55 AM

Re: Simple Background Change Issue..

Beez wrote:

>Can I make a coding preference suggestion?
>
>Too bad, I'ma do it anyway! :D
>

>for (var i=0; i<the_opts.leng th; i++) {

>
>for (var i=0, il=the_opts.len gth; i<il; i++){
>

> if ((the_opts[i].nodeName=="inp ut")||
> (the_opts[i].nodeName=="INP UT"))

>
>if (the_opts[i].nodeName.toLow erCase() == "input"){
var opt = the_opts[i]; //for maintainability
opt.onclick=cha ngeBackground;
>

> 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...Absolutel y!...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><ti tle>Prob.11</title>
<script type="text/javascript">

function attachHandlers () {

var the_opts=docume nt.getElementsB yTagName("input ")

for (var i=0; i<the_opts.leng th; i++) {

if (the_opts[i].nodeName.toLow erCase()=="inpu t")
{
the_opts[i].onclick=change Background;
}
}
}

function changeBackgroun d(evt){

var purp_button = document.getEle mentById("first _button");
var yellow_button = document.getEle mentById("sec_b utton");
var pink_button = document.getEle mentById("third _button");
var black_button = document.getEle mentById("fourt h_button");
var the_body = document.getEle mentsByTagName( "body")[0];

if (!evt)
{
evt = event;
this_sel=evt.sr cElement;
}
else
{
this_sel=evt.ta rget;
}

if (this_sel==purp _button)
{
the_body.style. backgroundColor ="purple";
}

if (this_sel==yell ow_button)
{
the_body.style. backgroundColor ="yellow";
}

if (this_sel==pink _button)
{
the_body.style. backgroundColor ="pink";
}

if (this_sel==blac k_button)
{
the_body.style. backgroundColor ="black";
}
}

</script></head>
<body bgcolor="blue" onLoad="attachH andlers();">

<div class="the_butt ons">
<input type="button" value="purple" id="first_butto n"><br>
<input type="button" value="yellow" id="sec_button" ><br>
<input type="button" value="pink" id="third_butto n"><br>
<input type="button" value="black" id="fourth_butt on">
</div>

</body>
</html>

--
Message posted via WebmasterKB.com

Oh noes!

http://www.webmasterkb.com/Uwe/Forums.aspx/javascript/200808/1

**John W Kennedy** · Aug 24 '08, 02:55 AM

Re: Simple Background Change Issue..

Thomas 'PointedEars' Lahn wrote:

There is no uppercase character for the "ÃŸ" in German;

Actually, yes, there is. See
<URL:http://de.wikipedia.or g/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"

**Thomas 'PointedEars' Lahn** · Aug 24 '08, 10:05 AM

Re: Simple Background Change Issue..

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.or g/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 bugRiddenCrashP ronePieceOfJunk = (
navigator.userA gent.indexOf('M SIE 5') != -1
&& navigator.userA gent.indexOf('M ac') != -1
) // Plone, register_functi on.js:16

Simple Background Change Issue..

Simple Background Change Issue..

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment