Newbie Question: FireFox vs. IE

Discussion in 'Javascript' started by Jim Aikin, Feb 5, 2008.

  1. Jim Aikin

    Jim Aikin Guest

    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
     
    Jim Aikin, Feb 5, 2008
    #1
    1. Advertising

  2. Jim Aikin

    Jim Aikin Guest

    Randy Webb wrote:
    >
    > 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:
    >
    >> new function randomizeLine (lineNum) {
    >> new function randomizeAll() {

    >
    > 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
     
    Jim Aikin, Feb 5, 2008
    #2
    1. Advertising

  3. Jim Aikin

    RobG Guest

    On Feb 6, 6:08 am, Jim Aikin <> wrote:
    > Randy Webb wrote:
    >
    > > 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:

    >
    > >>   new function randomizeLine (lineNum) {
    > >>   new function randomizeAll() {

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

    >
    > 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:

    <body onload="randomizeAll();" ... >


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


    --
    Rob
     
    RobG, Feb 5, 2008
    #3
  4. Jim Aikin

    Jim Aikin Guest

    RobG wrote:
    >
    > 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
     
    Jim Aikin, Feb 5, 2008
    #4
  5. Jim Aikin

    Jim Aikin Guest

    Thomas 'PointedEars' Lahn wrote:
    >
    > 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
     
    Jim Aikin, Feb 6, 2008
    #5
  6. Jim Aikin <> writes:

    > 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.
     
    Joost Diepenmaat, Feb 6, 2008
    #6
  7. Jim Aikin wrote:
    > Thomas 'PointedEars' Lahn wrote:
    >> 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."


    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: <body ... onload="...">...</body>

    > 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
     
    Thomas 'PointedEars' Lahn, Feb 6, 2008
    #7
  8. Jim Aikin

    Jim Aikin Guest

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

    --Jim Aikin
     
    Jim Aikin, Feb 7, 2008
    #8
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Pacific Dragon
    Replies:
    3
    Views:
    3,373
    Pacific Dragon
    Mar 14, 2005
  2. Jeff
    Replies:
    3
    Views:
    1,146
  3. Jeff
    Replies:
    2
    Views:
    458
  4. Jerry C.
    Replies:
    8
    Views:
    278
    Uri Guttman
    Nov 23, 2003
  5. VK
    Replies:
    9
    Views:
    123
Loading...

Share This Page