在for循环中,如何传递document.getElementById('').onClick调用的函数

In a for loop how to pass parameter of function invoked by document.getElementById('').onClick

本文关键字:onClick 函数 调用 getElementById 循环 for document 何传递      更新时间:2023-09-26

当我点击div元素时,我想提醒我点击的div的id。但在所有div元素上,它都在提醒数组的最后一个值,即'e1'。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body  onload="populate();">
    <script type="text/javascript">
    function populate() {
        var divArray = ["a1", "b1", "c1", "d1", "e1"];
        for (var x in divArray) {
            if (divArray[x] === 'a1')
                document.getElementById(divArray[x]).innerHTML = "aaaaa";
            else
                document.getElementById(divArray[x]).innerHTML = "Common";
            document.getElementById(divArray[x]).onclick = function() {
                getDiv(divArray[x]);
            };
        }
    }
    function getDiv(x)
    {
        alert(x);
    }
    </script>
    <div id="a1"></div>
    <div id="b1"></div>
    <div id="c1"></div>
    <div id="d1"></div>
    <div id="e1"></div>
</body>
</html>

您的x不是您所希望的x。这可能会有所帮助。

// ...
document.getElementById(divArray[x]).onclick = (function(n) {
    return function() {
        getDiv(divArray[n]);
    };
}(x));
// ...

getDiv(divArray[x])替换为getDiv(this.id),因为您希望返回单击的元素的ID。

这是因为当您实际单击div时,for循环已经结束,所以x是循环结束时的值。要解决此问题,您需要调用getDiv(this.id);

尝试将点击事件(e)传递到您的点击处理程序中

        document.getElementById(divArray[x]).onclick = function(e) {
            console.log(e.toElement.id);
        };