What is the error in this code?The javascript code is not working

Question

I am trying to change the background color of my div element onclick.But it's not working.

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

Only css functions are working and javascript function is not working.

"it's not working" is not an acceptable way of telling us what is wrong. — Mattigins, Jun 01 '19 at 09:31
Possible duplicate of [Loop through an array in JavaScript](https://stackoverflow.com/questions/3010840/loop-through-an-array-in-javascript) — Ivar, Jun 01 '19 at 09:33

score 1 · Answer 1 · answered Jun 01 '19 at 09:33

Your script is wrong .

divElements is an array so do this . Add length to the for loop

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

score 1 · Answer 2 · answered Jun 01 '19 at 09:33

You have to use .length with divElements in for loop: Try this code now....

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

The border turns red, but the alert is once for div 1, twice for div 2, and three times for div 3. — Bman70, Jun 01 '19 at 09:37

score 1 · Answer 3 · answered Jun 01 '19 at 09:35

The problem is your for-loop

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

Her you try to say, do it as long as i is smaller divElements. Problem here is, divElements itself don't give you any numeric value (for length). It's just the array.

To get it work you have to get the array length (https://www.w3schools.com/jsref/jsref_length_array.asp) So you need divElements.length

In you for loop it would look like this.

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

Here you can try out a working example and play with it: https://jsfiddle.net/Hoargarth/fdcL14wy/1/

And here if you just wanna see it running:

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

score 0 · Answer 4 · answered Jun 01 '19 at 10:53

You need to go until the length of the results is reached and move the script tag into 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>

What is the error in this code?The javascript code is not working

4 Answers4