Newbie Question: FireFox vs. IE

J

Jim Aikin

I'm in the very beginning stages of learning JavaScript, so apologies in
advance for the dumb question(s). As a learning experience, I've created
a random haiku generator. This uses an external .js file to generate the
actual text.

It works as expected in IE7: Clicking on a button chooses a new line or
lines of text at random. But it doesn't work in FireFox 2. (Yes,
JavaScript is enabled in the FF Options > Content box.) The buttons
don't do anything, and the haiku is never displayed, only the dummy text
(g, f, and p in the three div lines below).

I suspect the problem may be with innerHTML -- or possibly it has to do
with how I'm loading the external file. I've poked around on the Web and
haven't found any clues, so here I am. Code follows -- suggestions
appreciated!

--Jim Aikin

// begin main page code

<head><title>Test Page</title>
<script type="text/javascript" src="lineGenerator.js">
</script>

</head>
<body>
<div id="Line1"><p>g </div>
<div id="Line2"><p>f </div>
<div id="Line3"><p>d </div>
<div id="randomNum">
<script type="text/javascript">
new function randomizeLine (lineNum) {
var lineText;
switch(lineNum) {
case 1:
lineText = generateLine(1);
document.getElementById('Line1').innerHTML = lineText;
break;
case 2:
lineText = generateLine(2);
document.getElementById('Line2').innerHTML = lineText;
break;
case 3:
lineText = generateLine(3);
document.getElementById('Line3').innerHTML = lineText;
}
}
new function randomizeAll() {
randomizeLine(1);
randomizeLine(2);
randomizeLine(3);
}
onload = "randomizeAll();"
</script>
<noscript>
Either your browser does not support JavaScript, or you have
turned it off.
</noscript>
</div>

<form>
<input type="button" name="Line1" value="Line 1"
onClick="randomizeLine(1)"; />
<input type="button" name="Line2" value="Line 2"
onClick="randomizeLine(2)"; />
<input type="button" name="Line3" value="Line 3"
onClick="randomizeLine(3)"; />
<br><br>
<input type="button" name="AllNew" value="Regenerate All"
onClick="randomizeAll()"; />
</form>
</body>

//end main page code -- begin external file code

function generateLine(lineNum) {
var randNum = Math.ceil(4*Math.random());
var lineText;

if (lineNum == 1)
switch(randNum) {
case 1:
lineText = "In the white morning";
break;
case 2:
lineText = "Along a river";
break;
case 3:
lineText = "Behind the cottage";
break;
default:
lineText = "When deep night arrives";
}
if (lineNum == 2)
switch(randNum) {
case 1:
lineText = "I tread carefully, choosing";
break;
case 2:
lineText = "the stone statues fall backward";
break;
case 3:
lineText = "a young boy weeps and plays dice";
break;
default:
lineText = "monkeys dance like dervishes";
}
if (lineNum == 3)
switch(randNum) {
case 1:
lineText = "without knowing it.";
break;
case 2:
lineText = "as the bright moon weeps.";
break;
case 3:
lineText = "while flutes trill for days.";
break;
default:
lineText = "despite the barricade.";
}

return lineText;
}

// end external file code
 
J

Jim Aikin

Randy said:
It isn't innerHTML related and it isn't related to how you are loading
the external file. It is related to an error in two lines of your code:


Remove the "new" and it will work, happily, in Firefox.

Thanks! That's a big improvement.

Firefox is still not recognizing this line, however:

onload = "randomizeAll();"

When the page loads, Firefox displays the default text. It only
generates lines of haiku after I click the button. Here again, I'm
assuming my code is faulty (and I'll check the jslint site -- thanks).

Possibly Firefox expects an onload call to be in the head rather than
the body, but in this situation I don't see how to do that, because the
three div blocks need to be created before onload runs.

More likely, I'm committing an entirely different blunder.

--Jim Aikin
 
R

RobG

Thanks! That's a big improvement.

The new operator is expected to be followed by a call to a
constructor, not a function statement, e.g.:

function Bar() {
// constructor stuff
}
var foo = new Bar();

Firefox is still not recognizing this line, however:

onload = "randomizeAll();"

Welcome to the quirky world of browser scripting.

In most browsers, the window.onload property[1] expects to be assigned
a reference to a function object, so either:

window.onload = randomizeAll;

or

window.onload = function () {
radomizeAll();
// Other stuff to do onload
}

However, if you were assigning a value to the body element's onload
attribute, then:

Possibly Firefox expects an onload call to be in the head rather than
the body, but in this situation I don't see how to do that, because the
three div blocks need to be created before onload runs.

Where you put the code is not the issue, the only requirement is that
the assignment occurs before the event does. In the head is
considered good practice but it is not essential.


1. The window.onload property is non-standard but very widely
supported, whereas the HTML body element's onload attribute is defined
in the HTML specification (it also applies to frameset elements):

<URL: http://www.w3.org/TR/html4/interact/scripts.html#adef-onload >
<URL: http://developer.mozilla.org/en/docs/DOM:window.onload >
 
J

Jim Aikin

RobG said:
Welcome to the quirky world of browser scripting.

In most browsers, the window.onload property[1] expects to be assigned
a reference to a function object, so either:

window.onload = randomizeAll;

or

window.onload = function () {
randomizeAll();
// Other stuff to do onload
}

Yes, that does the trick. Thanks again. Now all I need to do is write
some haiku lint.

--Jim Aikin
 
J

Jim Aikin

Thomas said:
It would appear to be a good idea to mention the `onload' *attribute* first.
Because again an OP has disregarded the standards compliant and fully
compatible approach in favor of the quick-and-dirty proprietary error-prone one.

I appreciate the tips, and I'm certainly not aiming to start a flame war
here, but I think it may be a bit rude to suggest that I "disregarded
the standards compliant and fully compatible approach." I have only just
started learning JavaScript, and have no ghost of a clue what "the
standards compliant and fully compatible approach" would be.

To paraphrase Lewis Carroll, "How can I disregard it when I haven't even
seen it yet?"

Could you perhaps suggest a web page I could read where this information
is set down in readable form? I've looked at several JS tutorials
online, and found that (a) the quality varies from terse to quirky, (b)
the type of information you're referring to here is not as readily
accessible as I might wish.

Thanks for any suggestions!

--Jim Aikin
 
J

Joost Diepenmaat

Jim Aikin said:
I appreciate the tips, and I'm certainly not aiming to start a flame
war here, but I think it may be a bit rude to suggest that I
"disregarded the standards compliant and fully compatible approach." I
have only just started learning JavaScript, and have no ghost of a
clue what "the standards compliant and fully compatible approach"
would be.

To paraphrase Lewis Carroll, "How can I disregard it when I haven't
even seen it yet?"

Could you perhaps suggest a web page I could read where this
information is set down in readable form? I've looked at several JS
tutorials online, and found that (a) the quality varies from terse to
quirky, (b) the type of information you're referring to here is not as
readily accessible as I might wish.

I personally use the mozilla DOM docs extensively. It's a lot closer to
the standard than than IE's, and much better documented than Safari:

http://developer.mozilla.org/en/docs/Gecko_DOM_Reference

also:

http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference

The offical DOM docs are at the w3 site:

http://www.w3.org/DOM/DOMTR

Note that the offical specs miss things that are nearly universally
implemented and mention things that may be implemented in zero or more
browsers.

Quirksmode.org has plenty of info on many of the differences between
browsers:

http://www.quirksmode.org/js/intro.html

(you may need to click around a bit to find what you want)

Also: Flanagan's Javascript: the definitive guide is pretty extensive
with regard to the DOM. Just skip the chapter on object-orientation.

Joost.
 
T

Thomas 'PointedEars' Lahn

Jim said:
I appreciate the tips, and I'm certainly not aiming to start a flame war
here, but I think it may be a bit rude to suggest that I "disregarded
the standards compliant and fully compatible approach."

You have (happily) quoted the code for the proprietary approach and snipped
the references to the standards compliant one. So there is good reason to
believe that you have not noticed the reference to the latter, or if you
have noticed it that you have disregarded that approach because you have
given the first-named that works in many cases (and so at this time your
naturally only superficial test) a higher priority. There is nothing rude
about that assumption.
I have only just started learning JavaScript, and have no ghost of a clue
what "the standards compliant and fully compatible approach" would be.

Rob has mentioned it, too. It's the intrinsic `onload' event handler
attribute of the `body' element: said:
To paraphrase Lewis Carroll, "How can I disregard it when I haven't even
seen it yet?"

The issue here is that you should have seen it yet, but because it was
posted in the fashion of a side note it was easy for you to overlook. Hence
my suggestion that the approach known to work best should be posted first.
Could you perhaps suggest a web page I could read where this information
is set down in readable form?

q.e.d.


PointedEars
 
J

Jim Aikin

Thanks, Joost! Your reply gives me plenty of information to scrutinize
and absorb.

--Jim Aikin
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top