Arrays 映像数组和.src-映像未更改

Arrays 映像数组和.src-映像未更改,arrays,image,Arrays,Image,我已经创建了一个用于存储一系列.gif图像的数组,我只是尝试通过使用document.getElementById更改.src值来测试所有内容,但是当我更改它并加载页面时,图像与以前保持不变 function setImage() { var images = new Array(); images[0] = anemone.gif; images[1] = ball.gif; images[2] = crab.gif; images[3

我已经创建了一个用于存储一系列.gif图像的数组,我只是尝试通过使用document.getElementById更改.src值来测试所有内容,但是当我更改它并加载页面时,图像与以前保持不变

    function setImage()
    {
    var images = new Array();
    images[0] = anemone.gif; 
    images[1] = ball.gif;
    images[2] = crab.gif;
    images[3] = fish2.gif;
    images[4] = gull.gif;
    images[5] = jellyfish.gif;
    images[6] = moon.gif;
    images[7] = sail.gif;
    images[8] = shell.gif;
    images[9] = snail.gif;
    images[10] = sun.gif;
    images[11] = sunnies.gif;
    images[12] = whale.gif;

    var slots = new Array();
    slots[0] = document.getElementById("slot" + 0);
    slots[1] = document.getElementById("slot" + 1);
    slots[2] = document.getElementById("slot" + 2);
    slots[0].src = "snail.gif";
    document.getElementById('slot0').src = images[0];
    alert(images.length);
    }

我不明白为什么图像不会改变,但我知道它必须非常简单。我一直在浪费时间试图改变这一点,但没有任何效果。有人能指出我的错误吗?

您的代码有几个问题:

您的文件名必须是字符串,因此必须引用它们(您还可以简化数组创建):

另外,请确保您的
插槽
-元素正确,并引用所有属性,如:

<img id="slot0" class="slot" src="crab.gif" width="120" height="80">
最后,确保在加载文档/DOM就绪时调用函数。如果您不想使用像jQuery这样的框架,最简单的方法可能还是使用
窗口。onload

window.onload = setImage; //note that the parens are missing as you want to refer to the function instead of executing it
关于数组、window.onload和DOMReady的进一步阅读:


您的文件名必须是字符串,引用它们就像引用
'anemone.gif'
我用引号更新了它们,但仍然没有更改:)您真的调用了您的函数吗?如果是,您是否在
DOMReady
或类似的设备上执行此操作?存储在
插槽中的元素实际上是图像节点吗?您的控制台中是否收到错误消息?调用该函数是的,我假设因为我不知道什么是DOMReady,所以我没有使用它,并且我认为元素是图像节点,firebug中没有错误。这是代码中一个槽的示例—当您将一段JS放在文档的某个地方时,它将立即执行。在这种情况下,浏览器可能仍在创建DOM,因此您尝试选择的元素(
getElementById
)还不存在,因此您的函数调用不会执行任何操作。使用
window.onload=setImage是让浏览器等待页面创建完成的最简单的简单方法但这是一个相当复杂的领域,请在此处阅读一些相关内容:
var slots = [document.getElementById('slot0'), document.getElementById('slot1'), document.getElementById('slot2')];
window.onload = setImage; //note that the parens are missing as you want to refer to the function instead of executing it