Question

我正在尝试使数据清洁器从文件夹中加载图像，创建动态控件，然后用户将能够单击他们想要保留的图像。

我能够使用PHP代码动态加载图像。我正在尝试使用javascript为每个图像添加事件侦听器，但是出了点问题。

PHP代码：

<div class="container">
        <h1>Data Cleaner</h1>
        <button type="button" class="button" onclick="add_listeners()">Start Cleaning</button><br><br>
        <?php
            $dirname = "ps/images/";
            $images = glob($dirname."*.jpg");

            $counter = 0;

            foreach($images as $image) {
                $img_id = "img" . $counter;
                echo "<img src='".$image."' id='$img_id' />";
                $counter += 1;
            }

            echo "<p>Total Images: </p>";
            echo "<p id='imageNumbers'>$counter</p>";
        ?>
    </div>

现在，当图像加载到页面上时，我正在编写JavaScript代码。

JavaScript代码

<script>
        var imgTags = [];

        function add_listeners()
        {
            var totalImages = document.getElementById('imageNumbers').innerHTML;
            var counter = 0;

            // saving image id's
            while(counter <= totalImages)
            {
                imgTag = "img" + counter;
                imgTags.push(imgTag);
                document.getElementById(imgTag).addEventListener('click', ImageClicked(counter));
                counter += 1;
            }

        }

        function ImageClicked(index)
        {
            alert("Clicked " + index);
        }
    </script>

错误

当我单击添加事件事件侦听器的按钮时，它依次循环地发出警报，即我单击0，单击1，单击2 ..依此类推。我从不单击图像，但单击按钮将事件侦听器添加到图像，但它仍运行函数ImageClicked（）。

对不起，不好的问题。我阅读了其他类似的问题，并尝试了许多代码，但它们都给了我警报，而无需单击任何东西。

感谢您的帮助

为动态控件添加事件监听器

0 个答案: