个人中心
gpt4 book ai didi

javascript - 此代码中的错误是什么？javascript 代码不起作用

转载 作者：太空宇宙 更新时间：2023-11-03 22:16:46 25 4
gpt4 key购买 nike

我正在尝试更改我的 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 函数不起作用。

最佳答案

你的脚本是错误的。

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>

关于javascript - 此代码中的错误是什么？javascript 代码不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56405447/

25 4 0
文章推荐： node.js - Grunt 开发 EADDRINUSE
文章推荐： c# - 如何在少数页面上禁用缓存，以避免重复提交表单
文章推荐： c# - 如何使用存储库模式(或更合适的东西)来实现这个？
文章推荐： node.js - 测试 NodeJS 应用程序时，我应该将 Capybara.app 设置为什么？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com