Question

我创建了一个非常简单的脚本，用于读取数组的图像并将其显示在页面上。该阵列应该比图像更多，但这就是我开始的方式。我在运行程序时得到函数undefined 我认为这是一个范围问题，并且在调用（？）

时无法访问该函数

<button onclick="myFunction(images)">Try it</button>

<script>

var images = [
{img : " image1.jpg"},
{img : "image2.jpg"}
]

function myFunction(array) {


for ( var i= 0; i < array.length; i++){

var x = document.createElement("IMG");
x.setAttribute("src", array[i].img);

document.body.appendChild(x);

}
</script>

Answer 1

<强> I get function undefined when I run the program I think this is a scope issue and the function can not be accessed when called(?)

将脚本标记放在Button HTML之前，以便解析该函数并可在按钮onclick事件中设置。

<script>

var images = [
{img : " image1.jpg"},
{img : "image2.jpg"}
]

function myFunction(array) {


for ( var i= 0; i < array.length; i++){

var x = document.createElement("IMG");
x.setAttribute("src", array[i].img);

document.body.appendChild(x);

}
</script>

<button onclick="myFunction(images)">Try it</button>

这对我有用。我也回答了类似问题Check this

另外I would recommend to use the Jquery document ready event to bind events to the elements。像

   $(function(){
     $('#yourBtnId').on('click',function(){
        myFunction(images);
     });
   });

通过这种方式，您可以更好地控制绑定事件，例如有条件地绑定事件等。

Answer 2

在选择阵列的名称时，你已经不走运了。

显然，浏览器（至少是chrome）已经定义了app，它将在评估事件的字符串时包含页面中的所有图像，并且此数组将为空（因为最初没有图像，因为您和＃39;动态创建它们。）

我不确定它为什么会发生，而不是一个错误，它可能是与早期HTML的向后兼容性相关的东西......我的google-fu不够强大，无法找到这方面的参考。

如果您只是将数组名称更改为images，那么您的代码将在chrome中按预期工作。

无论如何要避免这种问题，通常的解决方案是将事件处理程序动态绑定到闭包而不是使用字符串......即。

imgs

使用这种方法，javascript代码将更可靠，不依赖于其他人定义的全局名称，也不会定义任何可能干扰其他人编写的脆弱代码的全局名称。

Javascript：从数组中显示图像

2 个答案: