Question

我正在尝试更改div元素onclick的背景颜色。但这不起作用。

<html>

     <head>
         <title>Event handling5</title>
         <meta charset="UTF-8">
         <style type="text/css">
         .styleClass{
             display: table-cell;
             border: 5px solid black;
             padding: 20px;
             text-align: center;
         }
         </style>
         </head>
         <body>
             <div id="DIV1" class="styleClass">DIV1
            <div id="DIV2" class="styleClass">DIV2
                <div id="DIV3" class="styleClass">DIV3

                </div>
            </div>     
            </div>
            <script type="text/javascript">
            var divElements=document.getElementsByTagName('div');
            for(var i=0;i<divElements;i++){
                divElements[i].onclick=function(){
                    this.style.borderColor='red';
                    alert(this.getAttribute("id")+"Border color changed");
                }
            }
            </script>
         </body>
 </html>

仅css函数有效，而javascript函数无效。

Answer 1

您的脚本错误。

divElements是一个数组，所以这样做。在for循环中添加长度

<script type="text/javascript">
            var divElements=document.getElementsByTagName('div');
            for(var i=0;i<divElements.length;i++){
                divElements[i].onclick=function(){
                    this.style.borderColor='red';
                    alert(this.getAttribute("id")+"Border color changed");
                }
            }
            </script>

Answer 2

您必须在for循环中将.length与divElements一起使用：现在尝试此代码。...

<html>

<head>
    <title>Event handling5</title>
    <meta charset="UTF-8">
    <style type="text/css">
        .styleClass {
            display: table-cell;
            border: 5px solid black;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="DIV1" class="styleClass">DIV1
        <div id="DIV2" class="styleClass">DIV2
            <div id="DIV3" class="styleClass">DIV3

            </div>
        </div>
    </div>
    <script type="text/javascript">
        var divElements = document.getElementsByTagName('div');
        for (var i = 0; i < divElements.length; i++) {
            console.log('--' + divElements[i]);
            divElements[i].onclick = function () {
                this.style.borderColor = 'red';
                alert(this.getAttribute("id") + "Border color changed");
            }
        }
    </script>
</body>

</html>

Answer 3

问题出在你的循环中

for(var i=0; i<divElements; i++){
/* Some Code */
}

您要说的是，只要i小于divElements，就这样做。这里的问题是divElements本身不给您任何数值（长度）。只是数组。

要使其正常工作，您必须获取数组长度（https://www.w3schools.com/jsref/jsref_length_array.asp），因此需要divElements.length

在您的for循环中，它看起来像这样。

for(var i=0;i<divElements.length;i++){
/* Some Code */
}

在这里您可以尝试一个可行的示例并使用它：https://jsfiddle.net/Hoargarth/fdcL14wy/1/

在这里，如果您只是想看到它正在运行：

 <head>
     <title>Event handling5</title>
     <meta charset="UTF-8">
     <style type="text/css">
     .styleClass{
         display: table-cell;
         border: 5px solid black;
         padding: 20px;
         text-align: center;
     }
     </style>
     </head>
     <body>
         <div id="DIV1" class="styleClass">DIV1
        <div id="DIV2" class="styleClass">DIV2
            <div id="DIV3" class="styleClass">DIV3

            </div>
        </div>     
        </div>
        <script type="text/javascript">
        var divElements=document.getElementsByTagName('div');
        for(var i=0;i<divElements.length;i++){
            divElements[i].onclick=function(){
                this.style.borderColor='red';
                alert(this.getAttribute("id")+"Border color changed");
            }
        }
        </script>
     </body>

Answer 4

您需要直到达到结果的length并将script标记移至head。

<html>

     <head>
         <title>Event handling5</title>
         <meta charset="UTF-8">
         <style type="text/css">
         .styleClass{
             display: table-cell;
             border: 5px solid black;
             padding: 20px;
             text-align: center;
         }
         </style>
            <script type="text/javascript">
            function load() {
                var divElements=document.getElementsByTagName('div');
                for(var i=0;i<divElements.length;i++){
                    divElements[i].onclick=function(){
                        this.style.borderColor='red';
                        alert(this.getAttribute("id")+"Border color changed");
                    }
                }
            }
            </script>
         </head>
         <body onload="load();">
             <div id="DIV1" class="styleClass">DIV1
            <div id="DIV2" class="styleClass">DIV2
                <div id="DIV3" class="styleClass">DIV3

                </div>
            </div>     
            </div>
         </body>
 </html>

这段程式码有什么错误？javascript程式码无法运作

4 个答案: