Why will this Function work in I.E. but not in Firefox?

[Dru]

Am I missing something simple? I can't figure this one out...

<script language="JavaScript" type="text/javascript">
function showDesc(desc)
{
showDescription.innerText = desc;
}
</script>

<img src="images/products/item1.gif)#" width="75" height="75"
border="0" onMouseOver="showDesc('prodName');"
onMouseOut="showDesc('Mouse over image for product name')">

thnx in advance..

 

[Evertjan.]

Dru wrote on 04 apr 2004 in comp.lang.javascript:

Am I missing something simple? I can't figure this one out...

<script language="JavaScript" type="text/javascript">
function showDesc(desc)
{
showDescription.innerText = desc;
}
</script>

<img src="images/products/item1.gif)#" width="75" height="75"
border="0" onMouseOver="showDesc('prodName');"
onMouseOut="showDesc('Mouse over image for product name')">

Is showDescription a global variable pointing to a html container?

Only under IE, I suppose.

If it is an ID, first make a variable:

var showDescription = getElementById("showDescription")

[knowing nothing about "Firefox", btw]

 

[Lasse Reichstein Nielsen]

Am I missing something simple? I can't figure this one out...

You are missing two simple things (and the standard completely).

<script language="JavaScript" type="text/javascript">

(The language attribute is not needed, but is not incorrect in
HTML 4 Transitional).

function showDesc(desc)
{
showDescription.innerText = desc;

You are using a (probably global) variable called "showDescription".
If you haven't declared it, it won't be there in FireFox (or many
other browsers). I guess you want it to refer to an element with
the name or id "showDescription". IE creates variables referring
to named elements, but it's not part of any standard, and many
other browsers don't. It's a FAQ entry:
<URL:http://jibbering.com/faq/#FAQ4_41>

You also use the property "innerText", which is a proprietary IE
feature. It won't work in most other browsers, including FireFox.

You can either use the more widely implemented, but just as
proprietary, innerHTML property, or you can use W3C DOM methods.
<URL:http://jibbering.com/faq/#FAQ4_15>

/L

 

[Michael Winter]

On 04 Apr 2004 16:33:00 GMT, Evertjan. <[email protected]>
wrote:

[snip]

If it is an ID, first make a variable:

var showDescription = getElementById("showDescription")

You forgot to qualify the method with "document.". The call will error
without it.

Mike

 

[Dru]

yeah i neglected to say i had a <div align="center"
id="showDescription"></div>

I'll try the innerHTML and see how that works out

 

[Evertjan.]

Michael Winter wrote on 04 apr 2004 in comp.lang.javascript:

You forgot to qualify the method with "document.". The call will error
without it.

Right.

 

[Dru]

this is inside a .js file so the <script language="javascript"> isn't
needed.

there is a div called showDescription that I left out of my first post
... changing the innerText to innerHTML doesn't seem to help Firefox.
I'm just going to have to read up on the FAQs and probable a good JS
book.

 

[DU]

You are missing two simple things (and the standard completely).




(The language attribute is not needed, but is not incorrect in
HTML 4 Transitional).




You are using a (probably global) variable called "showDescription".
If you haven't declared it, it won't be there in FireFox (or many
other browsers). I guess you want it to refer to an element with
the name or id "showDescription". IE creates variables referring
to named elements, but it's not part of any standard, and many
other browsers don't. It's a FAQ entry:
<URL:http://jibbering.com/faq/#FAQ4_41>

You also use the property "innerText", which is a proprietary IE
feature. It won't work in most other browsers, including FireFox.

You can either use the more widely implemented, but just as
proprietary, innerHTML property, or you can use W3C DOM methods.
<URL:http://jibbering.com/faq/#FAQ4_15>

/L

That FAQ item does not cover the W3C DOM method. When the node to
change, to update, to modify, etc.. is a text node, there is no W3C DOM
methods explained in the FAQ. Here, knowing more about the OP's page and
specifics, it would have been possible to suggest an entirely W3C
compliant code and cross-browser code like possibly:

<script type="text/javascript">
function showDesc(newDescriptiveText)
{
document.getElementById("showDescription").childNodes[0].nodeValue
= newDescriptiveText ;
}
</script>

<img src="images/products/item1.gif" width="75" height="75"
onmouseover="showDesc('prodName');" onmouseout="showDesc('Mouse over
image for product name');" alt="Descriptive alternate text">

and who knows,

<img src="images/products/item1.gif)#" width="75" height="75"
title="Mouse over image for product name" alt="Descriptive alternate
text">

could have been more than sufficient ... if we only had known what was
the webpage context.

DU

 

[Michael Winter]

[snip]

there is a div called showDescription that I left out of my first post
.. changing the innerText to innerHTML doesn't seem to help Firefox.

Because that wasn't the only issue addressed in Lasse's post. The problem
of using an element's id attribute value as a global variable is also a
problem.

I'm just going to have to read up on the FAQs and probable a good JS
book.

That would be a good idea.

Mike

[snipped top-post quotation]

 

[DU]

this is inside a .js file so the <script language="javascript"> isn't
needed.

You still need to use the proper attribute when embedding an external
..js file:

there is a div called showDescription that I left out of my first post
... changing the innerText to innerHTML doesn't seem to help Firefox.

Evertan suggested to you to use the getElementById method which is
widely supported by browsers (MSIE 5+) and is W3C compliant.

I'm just going to have to read up on the FAQs and probable a good JS
book.

2 urls I recommend to first visit (which are mentioned in the
comp.lang.javascript FAQ):

Using Web Standards in Your Web Pages
http://www.mozilla.org/docs/web-developer/upgrade_2.html

Updating DHTML Web Pages for next generation browsers
http://devedge.netscape.com/viewsource/2001/updating-dhtml-web-pages/

These 2 urls have tips and tricks and fit well your questions and
difficulties.

DU