在 Javascript 中使用变量和 ID答案

【问题标题】：Using variable and ID in Javascript在 Javascript 中使用变量和 ID
【发布时间】：2013-12-22 23:42:45
【问题描述】：

尝试更改 DIV 标记的 css 背景。但是我需要放一张随机图片（目前保存为1.jpg 2.jpg... 4.jpg）作为背景我通过 JS 得到一个随机数，我发生的问题实际上是将该随机数分配为在决定将什么图像放入 DIV 标记时使用的值。

这是我得到的：

var slotImage = new Array();

slotImage[0]=Math.floor(Math.random()*4);
slotImage[1]=Math.floor(Math.random()*4);
slotImage[2]=Math.floor(Math.random()*4);

var findReplacementID, putReplacementImage;

for (findReplacementID=0;findReplacementID<3;findReplacementID++) 
{           

    for (putReplacementImage=0;putReplacementImage<4;putReplacementImage++) 

    {
        if (slotImage[findReplacementID] == putReplacementImage) 

        {
        alert(slotImage[findReplacementID].toString());
        document.getElementById('image' + findReplacementID).style.backgroundImage= 'url(pictures/' + putReplacementImage + 'jpg)'; 
        }
    }
}

findReplacementID 是第一个循环（我需要更改 3 个单独的 DIV 标签，每个标签名为 image1、image2 和 image3。嵌入其中的是另一个循环 putReplacementImage，它经过四次将当前随机数与存储的值进行比较在每个随机数的slotImage索引中，如果相等，我想用文件夹中对应的图片替换背景。

对不起，如果这看起来有点啰嗦。我在错误控制台上遇到的错误是

TypeError: 'null' is not an object (evaluating 'document.getElementById('image' + findReplacementID).style')

有什么想法吗？如果它没有多大意义或 TL/DR 我遇到的主要问题是在编辑 DIV 标签的背景时将变量和 ID 名称放在一起。

【问题讨论】：

它告诉你在你的 html 中没有 'image1' 或 'image2' 或 'image3' 。我们可以看到您的 html 或 JSFiddle/JSBin 吗？另外，您打算用pictures/0jpg 或pictures/0.jpg 替换图像吗？
编辑：那是我的 html？肯定会启动 jsfiddle ：jsfiddle.net/lukes/NCT4Z/#&togetherjs=7Jeyl8GsVm
你意识到你不需要</div>，你可以在结束标签前加一个斜线。
执行脚本时页面加载了吗？
是的，页面加载，当我运行它时，我收到一个 0-3 之间随机数的警报，然后执行背景更改的行没有运行并标记该错误

标签： javascript

【解决方案1】：

putReplacementImage 有时会为 0，因此将其更改为 (putReplacementImage + 1).toString()，而您在 jpg 之前缺少一个 .，因此将其更改为 .jpg，最后，您缺少一个关闭) 在url( 中，所以添加+ ')'。这应该可以解决您的问题。您的代码现在应该如下所示：

document.getElementById('image' + (findReplacementID + 1).toString()).style.backgroundImage=
'url(pictures/' + putReplacementImage + '.jpg)';

【讨论】：

【解决方案2】：

document.getElementById() 只是没有找到具有 id 的元素。 console.log('image' + findReplacementID) 并确保存在带有 id 的元素。

【讨论】：

是的，我在 html 中的 ID 是

到 3，所以我不太确定发生了什么？
您是否尝试登录image+ findReplacementID？你应该确保那是你认为的那样。如果返回的 id 存在，那么您的 HTML 可能就真的搞砸了。