SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member maxb65's Avatar
    Join Date
    Nov 2002
    Location
    Ft. Lauderdale, FL
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Could somebody explain me this example?

    Hi all.
    I'm practicing DHTML at www.w3schools.com/dhtml. I came across this example.

    Could somebody explain me what that variable cc=0 represent and the correct way to read that if statement?

    Thanks.
    New to Javascript (and it shows...)

    BTW: here's the code
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function lighton()
    {
    myimage.src="bulbon.gif"
    }
    
    function lightoff()
    {
    myimage.src="bulboff.gif"
    }
    </script>
     
    
    </head>
    <body>
    
    <img id="myimage" onmousedown="lighton()" 
    onmouseup="lightoff()" 
    src="bulboff.gif" width="100" 
    height="180">
    <p>Click to turn on the light</p>
    </body>
    </html>

  2. #2
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    its a toggle......

    your code only lights 'onmousedown',
    the script you showed was an 'onclick "toggle"', it swithches states, between 'on' and 'off' between clicks.
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  3. #3
    SitePoint Member maxb65's Avatar
    Join Date
    Nov 2002
    Location
    Ft. Lauderdale, FL
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry!
    I copied and pasted the code from a different example
    Here it is:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    cc=0
    function changeimage()
    {
    if (cc==0) 
    {
    cc=1
    myimage.src="bulbon.gif"
    }
    else
    {
    cc=0
    myimage.src="bulboff.gif"
    }
    }
    </script>
    </head>
    
    <body>
    
    <img id="myimage" onclick="changeimage()" 
    border="0" src="bulboff.gif" 
    width="100" height="180" />
    
    <p>Click to turn on/off the light</p>
    
    </body>
    </html>
    Markdidj: thanks for the reply.
    Yes, I've understood it was an 'onclick "toggle"' but I still can't explain (in plain English...) why the function is formulated that way. I know it works, but I don't know how.
    Anybody?

    Thanks.

  4. #4
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    how javascript works........

    The browser reads your html and javascript once through, just remembering the functions and data, so it starts with cc=0; and the function will do nothing.

    It then sets up the page with HTML, placing the image (bulboff) and calling it "myimage". It assigns the event, in this case an "onclick"

    so when you click the image containing the "onclick", it pulls up the "changeimage()" function.

    as it starts with cc=0;
    then if (cc=0) is true, which it is, it makes cc=1,
    then the src of that image becomes "bulbon.gif".

    the else wont be triggered, as its already completed the function.

    The next time you click, it calls the same function, but this time cc still equals "1"

    so as cc!=0 (doesn't equal) it misses the first part of the function, but picks up on the "else", returning cc to 0, and then changing the src of "myimage" back to "bulboff.gif"

    So then when you call the function, cc has returned to 0

    Have fun friend.......
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  5. #5
    SitePoint Member maxb65's Avatar
    Join Date
    Nov 2002
    Location
    Ft. Lauderdale, FL
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Markdidj:
    Thank you very much.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •