Having problem implementing Javascript: Not working

Question

I'm having a little trouble and want to ask why my Javascript code is not working here. This is my HTML / CSS / Java Script code.

I want to create a form with a small tooltip on user ID when user hover their mouse in input area, it will appear the "Student ID" box.

HTML

        <p>Account Information</p>
        <p> 
            <label for="sid" >User ID</label>
            <input type="text" name="sid" id="sid" />
            <span id="sidTip" class="tooltip">Student ID</span>
        </p>

CSS

.tooltip {                      
    display                     : none;             
    position                    : relative;     
    background-color    : lightblue;    
    border-radius           : 5px;              
    text-align              : center;           
    padding                     : 5px;              
    left                            : 1em;              
}
.tooltip:after {            
    position                        : absolute;     
    top                             : 10px;             
    border-style                    : solid;
    height                          : 0;
    width                           : 0;
}

Javascript

function showTip() {
    var sidTip = document.getElementById("sidTip");     
    sidTip.style.display = "inline";                    
}

function hideTip() {                                    
    var sidTip = document.getElementById("sidTip");
    sidTip.style.display = "none";                      
                                                        
}

function init() {                                       
    var sid = document.getElementById("sid");
    sid.onmouseover=showTip();                              
    sid.onmouseout=hideTip();                                               
                                                        
}

window.onload=init();

hmm why are you using colon `:` on your `onmouseover:showTip`, `onmouseout:hideTip` and `onload:init`? — bertdida, Aug 17 '20 at 01:46
@bertdida oh my bad, I've changed it but it is still not working — chro1104, Aug 17 '20 at 01:50
Will you be able to update your post to remove those colons? — bertdida, Aug 17 '20 at 01:54
@chro1104 Changed it to what? `window.onload = init();` etc.? `init()` isn’t a function. Use `addEventListener("DOMContentLoaded", init);`, `addEventListener("load", init);`, or `window.onload = init;` instead (ordered from most to least favorable). Read the [documentation on how to bind event listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). — Sebastian Simon, Aug 17 '20 at 01:55
Duplicate of [Onclick event getting called automatically](https://stackoverflow.com/questions/10101899/onclick-event-getting-called-automatically). — Sebastian Simon, Aug 17 '20 at 02:00

bertdida · Accepted Answer · 2020-08-17T02:04:59.777

0

Just use the function names when you assign them to events, don't invoke.

...

function init() {
  var sid = document.getElementById("sid");
  sid.onmouseover = showTip;
  sid.onmouseout = hideTip;
}

window.onload = init;

When you invoke your functions, it returns a value of undefined. That value will be then assigned to sid.onmouseover, sid.onmouseout and window.onload.

edited Aug 17 '20 at 02:04

answered Aug 17 '20 at 01:59

bertdida

4,988
2
16
22

Having problem implementing Javascript: Not working

1 Answers1