Question

<html >
 <head>   
  <title>JavaScript Example</title>
    <script type="text/javascript">
      function greet { 
        var greet = document.getElementById("greeting");
        greet.value="this is dynamic";
    </script>
 </head>
 <body>
   <p onmouseover="greet()"> Hello! Welcome to My Page </p> 
</html>

此代码有什么问题？

Answer 1

首先，您尚未关闭greet功能（缺少结束}字符）。其次，你错过了函数名后的括号：

function greet() {
    //Function body
}

其次，您使用getElementById尝试获取p元素的引用，但p元素没有id。

第三，greet变量将包含对p元素的引用，该元素没有value属性（例如，input元素）。如果您尝试更改元素的内容，则可能意味着innerHTML。

最后，您还没有关闭<body>元素。 编辑（参见评论） - 这不是问题，但我个人更喜欢关闭它以保持一致性。

您可以在调用时将元素的引用传递给函数，以节省您必须通过id获取它：

<p onmouseover="greet(this);">Example</p>

和JavaScript：

function greet(elem) {
    elem.innerHTML = "Something new";
}

Answer 2

p元素的ID应为greet，如：

<p onmouseover="greet()" id="greeting"> Hello! Welcome to My Page </p>

，以便在以下位置选择元素ID：

document.getElementById("greeting");

文档可以找到您尝试从HTML文档中选择的标记。

此外，我认为您需要使用“innerHTML”，而不是编辑节点的“value”属性。所以这给了：

<html >
 <head>   
  <title>JavaScript Example</title>
    <script type="text/javascript">
      function greet { 
        var greet = document.getElementById("greeting");
        greet.innerHTML="this is dynamic";
        }
    </script>
 </head>
 </body>
   <p onmouseover="greet()" id="greeting"> Hello! Welcome to My Page </p> 
</html>

我对JavaScript并不完全熟悉，但我相信它应该可行。

Answer 3

您可以尝试：

greet = function(elem) {
             elem.innerHTML = "Something new";
        }

或

greet = function() {
            var greet = document.getElementById("greeting");
            greet.innerHTML="this is dynamic";
        }

当然还有其他提示（例如相关id元素的<p>属性以及正确构建HTML）。

mouseover事件可以用在任何元素上，还是只用在图像上？

3 个答案: