2

hi2all 我编写的代码会在用户单击 div 时更改网页的颜色

但在这里不起作用是我的代码有什么问题

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="gencyolcu" />

    <title>Untitled 1</title>


    <script type="text/javascript">


    var x=document.getElementById("m");
    x.addEventListener("click",function{


      document.body.style.backgroundColor = "red";
    });

    </script>
</head>

<body >

<div id="m">kfjgflg</div>

</body>
</html>
4

2 回答 2

1

您应该使用以下内容：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html" />
        <meta name="author" content="gencyolcu" />
        <title>Untitled 1</title>
    </head>
    <body>
        <div id="m">kfjgflg</div>
        <script type="text/javascript">
            var x=document.getElementById("m");
            x.addEventListener("click",function(){
                document.body.style.backgroundColor = "red";
            });
        </script>
    </body>
</html>

因为您的原始代码中有两个问题：

  • 在标记“函数”之后缺少一个重要的 ()。
  • Javascript 仅在页面或元素准备就绪后识别元素。在这种情况下，只有当您的代码在识别它的 Javascript 代码之后，该元素才会被读取以被识别。

上面的代码解决了这个问题。

一个重要的观察：在某些 IE 中，此代码无法工作，因为使用了 x.addEventListener，在这种情况下，您可以将匿名函数转换为普通函数（带有名称）并使用addEventListener（如果可用）进行侦听和onclick（推荐用于旧 IE）。

这样，代码看起来像：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html" />
        <meta name="author" content="gencyolcu" />
        <title>Untitled 1</title>            
    </head>

    <body>

        <div id="m">kfjgflg</div>

        <script type="text/javascript">
            function changeColor(){
                document.body.style.backgroundColor = "red";
            }
            var x=document.getElementById("m");
            if(!!x.addEventListener){ //If exists
                x.addEventListener("click", changeColor);
            }
            x.onclick = changeColor; //It's a property, and ALWAYS can be set (but in some cases is not recognized)
        </script>
    </body>
</html>

这是此代码的工作示例：http: //jsfiddle.net/fjorgemota/qCXH3/

于 2013-04-25T11:49:31.523 回答
0

如果您打开了 JavaScript 错误控制台，它会告诉您无法访问addEventListener.undefined

您需要在构建 DOM 树m 后查找元素。要么放入一个被调用的函数中DOMContentLoaded：

document.addEventListener('DOMContentLoaded', function() {
    /* ... */
}, false);

或将您的脚本放在<body>.

于 2013-04-25T11:35:44.420 回答