attachEvent

[John McCarthy]

Novice here - using notepad only .....

function MenuBarIn(E)
{

var i;

with (document.getEl ementById(E.id) )
{

style.backgroun dColor = "steelblue" ;
style.top = "90%";
style.height = "10%";
style.borderTop Style = "solid";
style.borderRig htStyle = "solid";
style.borderBot tomStyle = "solid";
style.borderLef tStyle = "solid";
style.borderTop Width = "2px";
style.borderRig htWidth = "1px";
style.borderBot tomWidth = "1px";
style.borderLef tWidth = "1px";
style.borderTop Color = "rgb(102,204,25 5)";
style.borderRig htColor ="rgb(102,204,2 55)";
style.borderBot tomColor ="rgb(36,161,23 2)";
style.borderLef tColor = "rgb(36,161,232 )";

}

// global var
if (giSpanCnt < 14 )
{

// attempt to add 14 span id's each with an Event
for ( i = 0; i < 14 ; i++ )
{
var eleSpan = document.create Element( "SPAN" ) ;
giSpanCnt = giSpanCnt + 1 ;
eleSpan.innerHT ML = goMenuArray[giSpanCnt] ;

eleSpan.id = eleSpan.uniqueI D ;
eleSpan.classNa me = gClassNameMenuO bjects ;
//alert(eleSpan.i d) ;
//eleSpan.id = "IdSpan" + giSpanCnt ;

//var curID = document.getEle mentById(E.id). lastChild ;
document.getEle mentById(E.id). appendChild(ele Span) ;

// ERROR HERE - seems to attach for the First eleSpan but not the rest
// IOW - if the mouse enters the first Span I get back INCREASE - but then
I get back TypeMisMatch error
//eleSpan.attachE vent( "onMouseOve r" , IncText() ) ;
}
}
}

function IncText()
{
alert("Increase ");
}

All help appreciated ......

John McCarthy

[Lasse Reichstein Nielsen]

Re: attachEvent

"John McCarthy" <decaid@earthli nk.net> writes:
[color=blue]
> // ERROR HERE - seems to attach for the First eleSpan but not the rest
> // IOW - if the mouse enters the first Span I get back INCREASE - but then
> I get back TypeMisMatch error
> //eleSpan.attachE vent( "onMouseOve r" , IncText() ) ;[/color]

^ you call the function here
It should be
eleSpan.attachE vent("onmouseov er",IncText);
That will bind the function itself to the mouseover event, not the result
of calling it.
You should know that attachEvent *only* works in IE. The W3C DOM contains
functions to do the same for compliant browsers:
eleSpan.addEven tListener("mous eover",IncText, false);

Good luck
/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Thomas 'PointedEars' Lahn]

Re: attachEvent

Since Lasse already posted the solution, I will only pay attention to
the things that can be improved.

John McCarthy wrote:
[color=blue]
> Novice here - using notepad only .....[/color]

Notepad is your friend. You should stick to Notepad or use only source
code editors (I would recommend either eclipse with JavaScript Editor
Plugin 0.0.3 or Dreamweaver MX 6.1 using Homesite/Coders layout). And
never trust (JavaScript) source code you do not fully understand. Most
of it, especially on the Web, is badly flawed and gets you more in
trouble. Copy & pray does not pay. (Hey, I like the sound of that one!
:-))
[color=blue]
> function MenuBarIn(E)
> {
>
> var i;
>
> with (document.getEl ementById(E.id) )[/color]

Always check objects and properties before you access them:

if (document.getEl ementById) // Does such a property exist?
{ // if yes
var o = document.getEle mentById(E.id); // use it
if (o) // if successful
{
// do something
}
// do something more
}

See also http://pointedears.de.vu/scripts/test/whatami

But you do *not* need getElementById( ...) here, since you are already
passing the object reference with `E' (`E.id' tells that):

if (E)
{
with (E)
{
// ...
}
}

is sufficient here.
[color=blue]
> {
>
> style.backgroun dColor = "steelblue" ;
> [...]
> style.borderLef tColor = "rgb(36,161,232 )";[/color]

Since you always refer to the `style' property within the block,
you could equally use

if (E && E.style)
{
with (E.style)
{
// ...
}
}

However, if you can avoid it, do not use the `with' statement.
It is likely to produce script errors if not used thoughtfully
and is therefore deprecated in JavaScript 1.5. Reference the
object you intend to use instead:

// if the referenced object has the `style' property
if (E && typeof E.style != "undefined" )
{
var s = E.style;
s.backgroundCol or = ...
// ...
s.borderLeftCol or = ...
}

It is good practice to watch for the case of identifiers. Usually
constructor functions should start with a capital letter while
properties and object references should not. Thus `e' instead of
`E' and `menuBarIn' instead of `MenuBarIn' is recommended here.
[color=blue]
> }
> // global var
> if (giSpanCnt < 14 )[/color]

Avoid global variables where you can. With this function, you could
have passed the value of `giSpanCnt' as second argument and let the
function return the changed value. You could have also passed a
reference to a container object as second argument and could change
the property of the object instead. In the latter case, you could
have left out the return of the new value.
[color=blue]
> {
>
> // attempt to add 14 span id's each with an Event
> for ( i = 0; i < 14 ; i++ )
> {
> var eleSpan = document.create Element( "SPAN" ) ;
> giSpanCnt = giSpanCnt + 1 ;
> eleSpan.innerHT ML = goMenuArray[giSpanCnt] ;
>
> eleSpan.id = eleSpan.uniqueI D ;
> eleSpan.classNa me = gClassNameMenuO bjects ;
> //alert(eleSpan.i d) ;
> //eleSpan.id = "IdSpan" + giSpanCnt ;
>
> //var curID = document.getEle mentById(E.id). lastChild ;
> document.getEle mentById(E.id). appendChild(ele Span) ;
>
> // ERROR HERE - seems to attach for the First eleSpan but not the rest
> // IOW - if the mouse enters the first Span I get back INCREASE - but then
> I get back TypeMisMatch error
> //eleSpan.attachE vent( "onMouseOve r" , IncText() ) ;[/color]

Get used to a coding style that is easily readable and editable.
This also helps you from staying away from trouble: Not that much
work to change it, and omitted whitespace reduces file size while
errors with flawed implementations are less likely. Style also
includes consequent indentation of blocks (with space, not with tab),
e.g. the above should read (ignoring what is semantically wrong
with the code for now):

for (i = 0; i < 14; i++)
{
var eleSpan = document.create Element("SPAN") ;
giSpanCnt = giSpanCnt + 1;
eleSpan.innerHT ML = goMenuArray[giSpanCnt];

eleSpan.id = eleSpan.uniqueI D;
eleSpan.classNa me = gClassNameMenuO bjects;
//alert(eleSpan.i d);
//eleSpan.id = "IdSpan" + giSpanCnt;

//var curID = document.getEle mentById(E.id). lastChild;
document.getEle mentById(E.id). appendChild(ele Span);

// ...
}


PointedEars

[Keith Bowes]

Re: attachEvent

Lasse Reichstein Nielsen wrote:[color=blue][color=green]
>>I get back TypeMisMatch error
>> //eleSpan.attachE vent( "onMouseOve r" , IncText() ) ;[/color]
>
>
> ^ you call the function here
> It should be
> eleSpan.attachE vent("onmouseov er",IncText);
> That will bind the function itself to the mouseover event, not the result
> of calling it.
> You should know that attachEvent *only* works in IE. The W3C DOM contains
> functions to do the same for compliant browsers:
> eleSpan.addEven tListener("mous eover",IncText, false);
>[/color]

I could be mistaken, since I haven't done complex DOM work in a long
time, but wouldn't the following work well in both browsers:
eleSpan.onmouse over = IncText();

[Thomas 'PointedEars' Lahn]

Re: attachEvent

Keith Bowes wrote:
[color=blue]
> Lasse Reichstein Nielsen wrote:[color=green][color=darkred]
>>>I get back TypeMisMatch error
>>> //eleSpan.attachE vent( "onMouseOve r" , IncText() ) ;[/color]
>> ^ you call the function here
>> It should be
>> eleSpan.attachE vent("onmouseov er",IncText);
>> That will bind the function itself to the mouseover event, not the result
>> of calling it.
>> You should know that attachEvent *only* works in IE. The W3C DOM contains
>> functions to do the same for compliant browsers:
>> eleSpan.addEven tListener("mous eover",IncText, false);[/color]
>
> I could be mistaken, since I haven't done complex DOM work in a long
> time, but wouldn't the following work well in both browsers:
> eleSpan.onmouse over = IncText();[/color]

Same problem. The event handler is still asigned the *return value*
of the function (since the call operator is used), not the function
reference. Thus

eleSpan.onmouse over = IncText;

should work as supposed.


PointedEars