时间戳

首页 > 解决方案 > 实现 Javascript 时遇到问题：不工作

javascript - 实现 Javascript 时遇到问题：不工作

问题描述

我遇到了一些麻烦，想问一下为什么我的 Javascript 代码在这里不起作用。这是我的 HTML/CSS/Java 脚本代码。

当用户将鼠标悬停在输入区域时，我想在用户 ID 上创建一个带有小工具提示的表单，它将出现“学生 ID”框。

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();

标签： javascripthtml

解决方案

将它们分配给events 时只需使用函数名称，不要调用。

...

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

window.onload = init;

当你调用你的函数时，它返回一个undefined. 然后将该值分配给sid.onmouseover,sid.onmouseout和window.onload。

推荐阅读