Question

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>

Answer 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/

Answer 2

如果您打开了JavaScript错误控制台，则会告诉您无法访问addEventListener的属性/方法undefined。

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

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

或将您的脚本放在<body>。
的末尾

使用纯javascript改变体色

2 个答案: