Moo*_*227 19 html javascript innerhtml
我已经习惯了一段时间,但它不会起作用,我无法弄清楚为什么.请帮忙.这是我有的:
<html>
<head>
<title>lala</title>
</head>
<body>
<h1 onmouseover="go('The dog is in its shed')" onmouseout="clear()">lalala</h1>
<div id="goy"></div>
<script type="text/javascript">
function go(what) {
document.getElementById("goy").innerHTML = what;
}
function clear() {
document.getElementById("goy").innerHTML = "";
}
</script>
</body>
</html>
鼠标悬停工作并显示div中的文本,但当我将鼠标移出h1标签时,文本停留在那里,我不知道为什么,帮助将不胜感激.
T.J*_*der 23
问题似乎是全局符号clear已经在使用中,并且您的函数无法成功覆盖它.如果您将该名称更改为其他名称(我使用过blah),它可以正常工作:
直播:使用的版本clear失败 | 使用的版本blah有效
<html>
<head>
<title>lala</title>
</head>
<body>
<h1 onmouseover="go('The dog is in its shed')" onmouseout="blah()">lalala</h1>
<div id="goy"></div>
<script type="text/javascript">
function go(what) {
document.getElementById("goy").innerHTML = what;
}
function blah() {
document.getElementById("goy").innerHTML = "";
}
</script>
</body>
</html>
这是基本原则的一个很好的例证:尽可能避免全局变量.浏览器中的全局命名空间非常拥挤,当发生冲突时,你会得到像这样的奇怪错误.
这样做的必然结果是不使用旧式onxyz=...属性来挂钩事件处理程序,因为它们需要全局变量.相反,至少使用代码来解决问题:Live Copy
<html>
<head>
<title>lala</title>
</head>
<body>
<h1 id="the-header">lalala</h1>
<div id="goy"></div>
<script type="text/javascript">
// Scoping function makes the declarations within
// it *not* globals
(function(){
var header = document.getElementById("the-header");
header.onmouseover = function() {
go('The dog is in its shed');
};
header.onmouseout = clear;
function go(what) {
document.getElementById("goy").innerHTML = what;
}
function clear() {
document.getElementById("goy").innerHTML = "";
}
})();
</script>
</body>
</html>
......甚至更好,使用DOM2 addEventListener(或attachEventIE8及更早版本),因此您可以为元素上的事件提供多个处理程序.