Javascript 未按预期传递函数参数_Javascript_Html

Javascript 未按预期传递函数参数

javascript html

Javascript 未按预期传递函数参数,javascript,html,Javascript,Html,我将输入按钮附加到一个div，并通过以下方式向每个按钮添加onclick事件： function initializeImages(imagesStr) { imagesArr = imagesStr.split(";"); imagesDiv = document.getElementById("buttons"); for (i=0 ; i<imagesArr.length ; i++) { //Create button button = document

我将输入按钮附加到一个div，并通过以下方式向每个按钮添加onclick事件：

function initializeImages(imagesStr) 
{   
imagesArr = imagesStr.split(";");

imagesDiv = document.getElementById("buttons");

for (i=0 ; i<imagesArr.length ; i++)
{
    //Create button
    button = document.createElement('input');
    button.type = "button";
    button.className = "image_button";
    button.value = i+1;
    button.onclick = function(){showImage(imagesArr[i]);};

    //Append Button
    imagesDiv.appendChild(button);
}   
}

但这样，函数将接收对该静态变量的引用，并始终获取最后一个值

有什么建议吗？

这是未定义的，因为只有在调用单击回调时才会计算

。到那时，

已经超出了图像数组的长度

试一试

它是未定义的，因为直到调用click回调时才计算

。到那时，

已经超出了图像数组的长度

试一试

如果您更改：

button.onclick = function(){showImage(imagesArr[i]);};

为此：

button.onclick = showImage;

...

function showImage(el) {
    var index = parseInt(el.target.getAttribute('value'), 10);
    var image = imagesArr[index-1]

如果您更改：

button.onclick = function(){showImage(imagesArr[i]);};

为此：

button.onclick = showImage;

...

function showImage(el) {
    var index = parseInt(el.target.getAttribute('value'), 10);
    var image = imagesArr[index-1]

你们供应这个吗

<html>
<head>
<script>
var imgs= ['btn1','btn2','btn3'];
function AddImages(arr,dest){
    for(i in arr){
        document.getElementById(dest).innerHTML += '<input type="button" class="'+arr[i]+'" value="'+(parseInt(i)+1)+'" onclick="alert(\''+arr[i]+'\');"/>';
    }
}
</script>
<style>
.btn1 {
background-color:red;
}
.btn2 {
    background-color:green;
}
.btn3 {
    background-color:blue;
}
</style>
<body>
<div id="button"></div>
<a href="#test" onclick="AddImages(imgs,'button');">Add Images</a>
</body>
</html>


变量imgs=['btn1'、'btn2'、'btn3']；
功能附加映像（arr、dest）{
对于（我在arr中）{
document.getElementById（dest.innerHTML+=''；
}
}
.btn1{
背景色：红色；
}
.btn2{
背景颜色：绿色；
}
.btn3{
背景颜色：蓝色；
}

你们供应这个吗

<html>
<head>
<script>
var imgs= ['btn1','btn2','btn3'];
function AddImages(arr,dest){
    for(i in arr){
        document.getElementById(dest).innerHTML += '<input type="button" class="'+arr[i]+'" value="'+(parseInt(i)+1)+'" onclick="alert(\''+arr[i]+'\');"/>';
    }
}
</script>
<style>
.btn1 {
background-color:red;
}
.btn2 {
    background-color:green;
}
.btn3 {
    background-color:blue;
}
</style>
<body>
<div id="button"></div>
<a href="#test" onclick="AddImages(imgs,'button');">Add Images</a>
</body>
</html>


变量imgs=['btn1'、'btn2'、'btn3']；
功能附加映像（arr、dest）{
对于（我在arr中）{
document.getElementById（dest.innerHTML+=''；
}
}
.btn1{
背景色：红色；
}
.btn2{
背景颜色：绿色；
}
.btn3{
背景颜色：蓝色；
}

您遇到了最常见的JavaScript错误之一。确保你理解所有肯定会出现的答案。这是很重要的东西。：-）这也是一个非常常见的问题。寻找“结束”。简单的回答是：只有一个变量名为

。您遇到了最常见的JavaScript错误之一。确保你理解所有肯定会出现的答案。这是很重要的东西。：-）这也是一个非常常见的问题。寻找“结束”。简单的回答是：只有一个变量名为

。您应该调用外部函数来返回赋值的内部变量。目前您正在分配外部。我喜欢这个答案。但是，我编辑了您的即时调用。您希望调用外部函数来立即返回内部函数，而不是像最初那样调用外部函数。这里有一个有效的例子：的确如此。我本应该花时间拉小提琴的。很抱歉，各位，谢谢您的编辑。您应该调用outer函数为赋值返回inner。目前您正在分配外部。我喜欢这个答案。但是，我编辑了您的即时调用。您希望调用外部函数来立即返回内部函数，而不是像最初那样调用外部函数。这里有一个有效的例子：的确如此。我本应该花时间拉小提琴的。对不起，各位，谢谢你们的编辑。