如何在HTML图像源标记中连接Javascript变量

如何将Javascript变量连接到HTML图像源标记的url中？我试过

$ANSWER.

“$ANSWER”

和

+$ANSWER+

但都不起作用

我是否需要使用

getElementbyID

我有一个名为

cat.jpg

、

dog.jpg

等的图像文件夹，还有一个包含这些动物名称的javascript数组

其中一个被选择为

$ANSWER

，然后我想使用变量

$ANSWER

显示图像

我已经在互联网上搜索过任何关于如何做到这一点的例子，但找不到任何例子

下面是我对如何编写它的最佳猜测，但我在控制台日志中看到“未找到”。图片在文件夹中，因为在我用Javascript重写之前，它在PHP中工作

<div>
<img id="ANSWER" src='pictures/animals/$ANSWER.jpg' width=80% height=auto >   
</div>
<script>
document.getElementById("ANSWER").src='pictures/animals/$ANSWER.jpg';
</script>

document.getElementById（“ANSWER”）.src='pictures/animals/$ANSWER.jpg'；

---

另外，如果在JQuery中有一种简单的方法可以做到这一点，我很想知道。

这对于原始JavaScript来说足够简单；只需确保每个“字符串”组件都用引号括起来，然后使用加号（

+

）与变量连接即可。请注意，变量应而不是带引号；应仅安装支撑管柱

例如，如果您有变量

cat

，并且希望在URL

pictures/animals/cat.jpg

中创建它，您将使用

'pictures/animals/'+$ANSWER+'.jpg'

还要注意的是，

width

和

height

值也需要用引号括起来，并且

src

的初始设置是不相关的，因为它会被覆盖

这可以从以下几点看出：

var$ANSWER='cat'；
document.getElementById（“ANSWER”）.src='pictures/animals/'+$ANSWER+'.jpg'；
log（document.getElementById（'ANSWER'）.src）
这就是您要寻找的：


var el=document.getElementById（“答案”）；
var图像=['dog'、'cat'、'fish']；
var指数=0；
函数setImage（）{
var img=图像[索引]；
el.src=`pictures/animals/${img}.jpg`；
索引++；
如果（索引>=images.len）{
指数=0；
}
}
setImage（）；//将第一个URL放入img标记中
setInterval（setImage，2000）；//每2秒钟更改一次图像。
如果用PHP声明了
$ANSWER
，则呈现的HTML/JS不会知道它

您需要这样做：

<div>
<img id="ANSWER" src='pictures/animals/$ANSWER.jpg' width=80% height=auto >   
</div>
<script>
document.getElementById("ANSWER").src='pictures/animals/<?php echo $ANSWER; ?>.jpg';
</script>


document.getElementById（“ANSWER”）.src='pictures/animals/.jpg'；

注意：我很久没有使用过PHP了，所以我可能在PHP语法的细节上有错误。不过，希望你会有这个想法

如果它是在JS中的某个地方声明的，您可以像这里建议的一些其他答案一样连接它：

<div>
<img id="ANSWER" src='pictures/animals/$ANSWER.jpg' width=80% height=auto >   
</div>
<script>
document.getElementById("ANSWER").src='pictures/animals/' + $ANSWER + '.jpg';
</script>


document.getElementById（“ANSWER”）.src='pictures/animals/'+$ANSWER+'.jpg'；
document.getElementById（“ANSWER”）.src='pictures/animals/'+'ANSWER.jpg'谢谢黑曜石。没问题！一旦你确认这解决了你的问题，请不要忘记点击投票按钮下方的灰色复选框——这会将其从“未回答问题”队列中删除，并为提问者和回答问题者赢得声誉。你可以在提出任何问题15分钟后这样做。当然，这么说，您没有义务将我的答案（或任何其他人的答案）标记为正确，尽管将问题标记为已解决有助于保持事情顺利进行：）我没有得到“未找到”错误，但现在得到的是TypeError:document.getElementById（…）为null这是即使我尝试添加$answer='cat'；答案是‘猫’；就在那之前我终于让它工作了。。这需要我将变量定义为字符串，并准备好文档。现在没有PHP连接到我的代码。那么，
$ANSWER
来自哪里？只是出于好奇。那好吧。：）不过，我建议大家不要养成在JS中用
$
和大写字母命名变量的习惯，这样可以提高清晰度和可读性。黑曜石有我想要的想法，但谢谢你的帮助。