Why won't onmouseover/out and onmousedown/up work?

Discussion in 'JavaScript' started by Tony Brar, Mar 31, 2013.

  1. #1
    Hi guys,

    I am re-learning JS.
    Okay, re-learning isn't exactly the right word.
    I'm horrible at Javascripting (trademark).
    But anyway, I've been learning on W3Schools (don't worry, I've seen w3fools.com and accept the risk, I will double check with other sources what I learn later).
    I used one of their tryit things (this one: http://www.w3schools.com/js/tryit.asp?filename=tryjs_events_mouseover and this one: http://www.w3schools.com/js/tryit.asp?filename=tryjs_events_mousedown).
    Then I tried to make my own similar script, so I would absorb the information better.
    Here are my scripts: http://jsfiddle.net/fortninja/7H52J/2/ (onmousedown/up) and http://jsfiddle.net/fortninja/YpKPc/7/ (onmouseover/out).
    They don't seem to function properly.
    Why is that?

    Thanks,
    -Tony
     
    Solved! View solution.
    Tony Brar, Mar 31, 2013 IP
  2. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #2
    Have you checked if the functions are being called? Add alert('function name called'); to the functions and see what happens.
     
    HuggyStudios, Mar 31, 2013 IP
  3. 007speed

    007speed Member

    Messages:
    38
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    38
    #3
    Try this one even if it's not like you wanted it but it works

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    <h1 id="poop" onmousedown="this.style.color='red';">Hello World!</h1>
    <h3  onmouseup="this.style.color = 'blue';">Hover Here!</h3>
    </body>
    </html>
    Code (markup):
     
    007speed, Mar 31, 2013 IP
  4. Tony Brar

    Tony Brar Active Member

    Messages:
    220
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    75
    #4
    Here's the result when I do that: http://jsfiddle.net/fortninja/YpKPc/10/
    It works with onmouseup, but not onmousedown...:mad:
    Any ideas?

    -Tony
     
    Tony Brar, Mar 31, 2013 IP
  5. 007speed

    007speed Member

    Messages:
    38
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    38
    #5
    Do you know what onmousedown means?
     
    007speed, Mar 31, 2013 IP
  6. Tony Brar

    Tony Brar Active Member

    Messages:
    220
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    75
    #6
    Is that a question or an insult? rsz_smile.png
    According to what I learned from http://www.w3schools.com/jsref/event_onmousedown.asp, onmousedown refers to when you press your left/right mouse click button down.
    This does not include releasing it, which is onmouseup.
    See here for more info (if it was a question, anyway rsz_smile.png ):
    http://www.w3schools.com/jsref/event_onmousedown.asp
    https://developer.mozilla.org/en-US/docs/DOM/window.onmousedown

    -Tony
     
    Tony Brar, Mar 31, 2013 IP
  7. 007speed

    007speed Member

    Messages:
    38
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    38
    #7
    Please don't get me wrong, I just wanted to make sure that you're not getting it wrong because from where I can see the script does what it is suppose to do, may be you want something else, if so please explain it, I'm just here to help :)
     
    007speed, Mar 31, 2013 IP
  8. #8
    This is where using the error console in FF or Opera comes in handy.

    [3/31/2013 11:33:11 PM] JavaScript - http://fiddle.jshell.net/fortninja/7H52J/2/show/
    Inline script compilation
    Syntax error at line 21 while loading: expected ';', got '{'
    myFunction() {
    -------------^
    
    Code (markup):
    Why aren't you declaring them AS functions? You didn't include the word "function" before your function names.
    myFunction() {
        document.getElementById("poop").style.color = "blue";
    }
    myfunction() {
        document.getElementById("poop").style.color = "red";
    }
    Code (markup):
    do we SEE a problem here? Should be:

    [b]function[/b] myFunction() {
        document.getElementById("poop").style.color = "blue";
    }
    [b]function[/b] myfunction() {
        document.getElementById("poop").style.color = "red";
    }
    Code (markup):
    Though you keep calling it hover -- down/up isn't hover, that's over/out! (hence several posters here that are confused)

    Also, try to use function names that actually mean something, and NEVER use the case sensitivity to distinguish them! That's just **** coding.
     
    deathshadow, Mar 31, 2013 IP
  9. Tony Brar

    Tony Brar Active Member

    Messages:
    220
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    75
    #9
    *facepalm* How did I forget the function keyword?
    Anyway, I fixed that and here is the result, which is not working:
    http://jsfiddle.net/fortninja/7H52J/5/
    Here it is working:
    http://jsfiddle.net/fortninja/7H52J/6/
    It wasn't working before because of this:
    2013-04-02_1512.png
    I changed it like this, and now it works:
    2013-04-02_1513.png
    Sorry for calling it hover instead of down and up.
    I stopped using the case sensitivity, and changed the function names to turnRed and turnBlue.
    Thanks for the tremendous help!
    You get my best answer!
     
    Tony Brar, Apr 2, 2013 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #10
    Happens to the best of us -- last night I wasted two hours trying to figure out why a class in PHP I was trying to inherit from wasn't working -- and it was all because on one method I had declared it as "private" instead of "protected". One word, buggered the whole thing and PHP's error message wasn't all that helpful.

    It happens. The more you start at it the worse it gets too. Something that SHOULD be obvious but isn't.
     
    deathshadow, Apr 3, 2013 IP
  11. Tony Brar

    Tony Brar Active Member

    Messages:
    220
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    75
    #11
    Thanks for the help anyway :)

    -Tony
     
    Tony Brar, Apr 3, 2013 IP