A JS script which works fine in IE / FF, but not in Opera... (?)

Discussion in 'Javascript' started by Fox, Aug 18, 2007.

  1. Fox

    Fox Guest

    Hi there!

    I'm new on the group :)
    I recently started to learn JavaScript, and I have a really weird
    problem...

    The script below (a simple slideshow) is working okay in both IE and
    FireFox, but in Opera it displays only the first image.... I would
    like to make it working on any browsers, I already tried many
    variations, but it is still not working in Opera (I am using Opera
    9.23 build 660 on Linux).

    <HTML>
    <HEAD>
    </HEAD>
    <BODY>

    <DIV NAME=Photo>
    <IMG SRC=snap1.png BORDER=1 WIDTH=512 HEIGHT=448>
    </DIV>

    <script>
    i=2
    function NextImg(){
    if(i>2)i=1
    document.all["Photo"].innerHTML="<IMG SRC=snap"+i+".png
    BORDER=1 WIDTH=512 HEIGHT=448>"
    i++
    }
    setInterval("NextImg()",4000)
    </script>

    </BODY>
    </HTML>

    Have anybody already seen such trouble with Opera?

    Best regards,
    Mateusz Viste
     
    Fox, Aug 18, 2007
    #1
    1. Advertisements

  2. Fox meinte:
    How about having a look at the JS error console? [1]
    Interesting, that it works on *any* browser...
    Enclosing attribute values in quotes is never a bad idea...
    Divs don't have names, maybe IDs.
    Type missing.
    document.all is proprietary, can be easily replaced by getElementById(),
    sometimes getElementsByName(), etc.

    Why innerHTML? Exchanging the src value would do.
    setInterval() is a method of the window object.
    Plenty of opportunities for any browser to get into problems.

    And when you're at it: Make your code more readable; some extra
    whitespace sprinkled here and there, semicolons for terminating
    commands, ...

    Gregor


    [1] http://operawiki.info/OperaJSConsole
     
    Gregor Kofler, Aug 18, 2007
    #2
    1. Advertisements

  3. Fox

    Fox Guest

    Good Idea :)
    Interesting!
    Indeed, it seems that the line above is making trouble to Opera. How
    to replace document.all to GetElementById? What's wrong in innerHTML?

    Thank you!
     
    Fox, Aug 18, 2007
    #3
  4. Fox meinte:
    See below and [1] and Google. (I suggest some FAQ browsing, for this
    very basic stuff.)
    It's not part of the W3C DOM, though understood by most contemporary
    browsers with various issues ([2] or Google might be a good starting
    point). In your example it's overkill.

    Markup: <img id="foo" ...>

    JS: document.getElementById("foo").src = "newpic.jpg";

    [1]
    http://developer.mozilla.org/en/docs/DOM:document.getElementById
    [2]
    http://developer.mozilla.org/en/docs/DOM:element.innerHTML

    Gregor
     
    Gregor Kofler, Aug 18, 2007
    #4
  5. It is more compatible (back to DOM Level 0) to give the `img' element
    a name (here: name="foo") and then use

    document.images["foo"].src = "newpic.jpg";

    Although with current UAs the `images' collection also works with IDs,
    as specified in W3C DOM Level 2 HTML.


    PointedEars
     
    Thomas 'PointedEars' Lahn, Aug 18, 2007
    #5
  6. Fox

    Fox Guest

    Okay, the slideshow script is working now on IE / FF and Opera :)
    Thank you, Gregor, PointedEars, for your valuable help!

    Here is the final version of the slideshow script, for any JS beginner
    (like me) who would need it ;-)

    <script type='text/javascript'>
    i=2
    function NextImg(){
    if (i>34) i=1;
    document.images["screenshot"].src = "../snapshot/100in1/snap"+i
    +".png";
    i++;
    }
    setInterval("NextImg()",3000)
    </script>
     
    Fox, Aug 20, 2007
    #6
    1. Advertisements

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 (here). After that, you can post your question and our members will help you out.