Javascript：显示数组外的图像

我创建了一个非常简单的脚本，可以读取数组的图像并将其显示在页面上。 这个阵列应该容纳的不仅仅是图像，但我就是这样开始的。 运行程序时，函数未定义 我认为这是一个范围问题，调用（？）时无法访问该函数

试试看
变量图像=[
{img:“image1.jpg”}，
{img:“image2.jpg”}
]
函数myFunction（数组）{
对于（var i=0；i

我在运行程序时未定义函数，我认为这是一个范围问题，调用（？）时无法访问该函数。

将脚本标记放在按钮HTML之前，以便解析函数并在Button 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>

---

这样，您就可以更好地控制绑定事件，如有条件地绑定到事件等。

您在选择数组名称时运气不好

显然，浏览器（至少是chrome）已经定义了一个

images

，当评估事件字符串时，该数组将包含页面中的所有图像，并且该数组将为空（因为在动态创建图像时，最初没有图像）

我不确定它到底为什么会发生，但与其说它是一个bug，不如说它与早期HTML的向后兼容性有关……我的google fu不够强大，无法找到这方面的参考

如果您只需将数组名称更改为

imgs

，您的代码将在chrome中正常工作

无论如何，为了避免此类问题，通常的解决方案是将事件处理程序动态绑定到闭包，而不是使用字符串…即

<button id="mybutton">Click me</button>
...
<script>
    (function(){
        var images = [ ... ];
        mybutton.onclick = function(){ loadImages(images); };
    })();
</script>

点击我
...
（功能（）{
var图像=[…]；
mybutton.onclick=function（）{loadImages（images）；}；
})();

---

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

这里有一些事情您可能需要更改：与其在HTML中单击1998

onclick

，不如在JS中找到按钮（例如，document.querySelector），然后使用

.addEventListener（“单击”，函数（evt）{…}）；

数组

不在HTML中，所以不要假装它在那里。在JS中做JS。同样，图像也有

图像

对象。

var x=new Image（）；x.src=…；document.body.appendChild（x）；

工作正常。

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

<button id="mybutton">Click me</button>
...
<script>
    (function(){
        var images = [ ... ];
        mybutton.onclick = function(){ loadImages(images); };
    })();
</script>