Javascript dynamically created Divs

February 24, 2022

This is a simple javascript code. I’m creating 5 divs in script and populate an ‘onclick’ event for each. However, all of them give me the id of the last one. Any idea why this behavior occurring? Many thanks.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test Page</title>
    <style type="text/css">
        .divImgPoint {
            float: left;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            margin-left: 5px;
            margin-right: 5px;
            border: ridge 2px #c73756;
        }

        .divTest {
            position: absolute;
            width: 100px;
            height: 100px;
            top: 200px;
            left: 100px;
            border: 1px solid red;
        }
    </style>
    <script type="text/javascript">
        function createNewDivs() {
            var divFixed = document.getElementById('divFixed');
            var newDiv;

            for (xI = 0; xI < 5; xI++) {
                newDiv = document.createElement('div');
                newDiv.id = "newDiv_" + xI;
                newDiv.className = "divImgPoint";
                newDiv.onclick = () => { alert(newDiv.id + " | " + xI); }
                divFixed.appendChild(newDiv);
            }
        }
    </script>
</head>
<body>
    <div id="divFixed">
    </div>
</body>
</html>
<script type="text/javascript">
    window.addEventListener('load', () => { createNewDivs(); });
</script>

>Solution :

Put let newDiv; inside loop.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test Page</title>
    <style type="text/css">
        .divImgPoint {
            float: left;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            margin-left: 5px;
            margin-right: 5px;
            border: ridge 2px #c73756;
        }

        .divTest {
            position: absolute;
            width: 100px;
            height: 100px;
            top: 200px;
            left: 100px;
            border: 1px solid red;
        }
    </style>
    <script type="text/javascript">
        function createNewDivs() {
            var divFixed = document.getElementById('divFixed');
            

            for (xI = 0; xI < 5; xI++) {
                let newDiv;
                newDiv = document.createElement('div');
                newDiv.id = "newDiv_" + xI;
                newDiv.className = "divImgPoint";
                newDiv.onclick = () => { alert(newDiv.id + " | " + xI); }
                divFixed.appendChild(newDiv);
            }
        }
    </script>
</head>
<body>
    <div id="divFixed">
    </div>
</body>
</html>
<script type="text/javascript">
    window.addEventListener('load', () => { createNewDivs(); });
</script>