Javascript onmouseout事件不使用h1标记_Javascript_Onmouseout

Javascript onmouseout事件不使用h1标记

javascript

Javascript onmouseout事件不使用h1标记,javascript,onmouseout,Javascript,Onmouseout,我正在尝试在mouseout和onmouseover事件。如果我删除了标记，下面的代码就可以正常工作了，让我困惑的是，对于标记，只有mouseover在启动，而不是mouseout。请告诉我我做错了什么 <!DOCTYPE html> <html> <body> <div onmouseout="mouseout();" onmouseover="mouseover();" id="test"><h1> Mouse </h1&g

我正在尝试在mouseout和onmouseover事件。如果我删除了标记，下面的代码就可以正常工作了，让我困惑的是，对于标记，只有mouseover在启动，而不是mouseout。请告诉我我做错了什么

<!DOCTYPE html>
<html>
<body>

<div onmouseout="mouseout();" onmouseover="mouseover();" id="test"><h1> Mouse </h1> </div> 
<div id="count"> </div>
<div id="count2"> </div>
<script>
var textonout = "<h1>Mouse out</h1>";
var count =0;
var out = 0;
var textonover = "<h1>Mouse Over</h1>";
function mouseout() {

document.getElementById("test").innerHTML = textonout;
document.getElementById("count2").innerHTML = out++;
}
function mouseover() {
    document.getElementById("test").innerHTML = textonover;
    document.getElementById("count").innerHTML = count++;
}
</script>

</body>
</html>

未捕获引用错误：未定义mouseout

您的控制台中有此错误。我承认，我更喜欢将js和html分开。在JS中调用事件

此外，您不需要每次更改文本时都重新创建h1。只需在h1中添加一个id，并替换其中的文本即可

HTML:

嗨，格里姆博德，我打开了Firebug，但我仍然没有看到这个错误。如果你能帮我理解为什么mouseout没有触发，我将不胜感激。你的解决方案很好，但我相信我可以从我的这个错误中吸取教训。请说明为什么mouseout事件触发器没有h1标记，但没有h1标记？

function mouseover() {
    document.getElementById("test").innerHTML = textonover **+ count**;
    document.getElementById("count").innerHTML = count++;

<div id="test">
     <h1 id="h1"> Mouse </h1> 
</div>
<div id="count"></div>
<div id="count2"></div>

var h1 = document.getElementById('h1');
textonout = "Mouse out";
var count = 0;
var out = 0;
var textonover = "Mouse Over";

var test = document.getElementById("test");
test.onmouseout = mouseout;
test.onmouseover = mouseover;
function mouseout() {

    h1.innerHTML = textonout;
    document.getElementById("count2").innerHTML = out++;
}

function mouseover() {
    h1.innerHTML = textonover;
    document.getElementById("count").innerHTML = count++;
}

Follow this , it work perfect.

<!DOCTYPE html>
<html>
<body>

<h1 id="test"> Mouse </h1> 
<div id="count"> </div>
<div id="count2"> </div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" type="text/javascript"></script>
<script>

$(document).ready(function(){
    var textonout = "Mouse out";
    var count =0;
    var out = 0;
    var textonover = "Mouse Over";
$("h1").mouseover(function(){
    $("h1").css("background-color","yellow");   
    document.getElementById("count").innerHTML = count++;
    document.getElementById("test").innerHTML = textonover;
  });
  $("h1").mouseout(function(){
    $("h1").css("background-color","lightgray");
    document.getElementById("test").innerHTML = textonout;
    document.getElementById("count2").innerHTML = out++;
  });
  });

</script>

</body>
</html>