如何将变量插入 <img> src参数？

Question

我正在尝试使用从Web服务获取的数据（id）在网页上生成QR码。 我不知道如何将javascript变量作为<img> src参数的一部分插入。

如您所见，我可以使用myFunction更改src（单击AFTER按钮）。 但是我不知道如何在初始页面加载中插入id变量（以在img行的末尾替换ID1_GOES_HERE）。 请帮忙！

这是一个代码：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>TEST</title>        
</head>
<body>

<script>
var id1 = "41c0236f-ed21-4182-be3d-26513078f704";

function myFunction(){
    var id2 = "41c0236f-ed21-4182-be3d-26513078f704";
    document.getElementById('qr_img').src="http://chart.apis.google.com/chart?cht=qr&chs=300x300&chld=H|0&chl="+id2;
}
</script>

<img id="qr_img" src="http://chart.apis.google.com/chart?cht=qr&chs=300x300&chld=H|0&chl=ID1_GOES_HERE"/>
<button onclick="myFunction()">test</button>

</body>
</html>

Answer 1

不要使用按钮单击处理程序，只需从脚本中调用函数即可：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>TEST</title>        
</head>
<body>

<script>
var id1 = "41c0236f-ed21-4182-be3d-26513078f704";

function myFunction(){
    var id2 = "41c0236f-ed21-4182-be3d-26513078f704";
    document.getElementById('qr_img').src = document.getElementById('qr_img').src + id2;
}

myFunction();
</script>

<img id="qr_img" src="http://chart.apis.google.com/chart?cht=qr&chs=300x300&chld=H|0&chl="/>
<button>test</button>

</body>
</html>

单击处理程序用于捕获按钮单击事件，并在那时进行一些操作。 那不是您想要的，所以删除按钮单击处理程序。

在<script>元素的末尾，只需调用myFunction()即可达到预期目的。

如果要在加载整个文档及其所有依赖项之后运行脚本，可以执行以下操作：

<script>
var id1 = "41c0236f-ed21-4182-be3d-26513078f704";

function myFunction(){
    var id2 = "41c0236f-ed21-4182-be3d-26513078f704";
    document.getElementById('qr_img').src = document.getElementById('qr_img').src + id2;
}

document.onload = myFunction();
</script>

对于这种简单的情况，您实际上可能根本不需要一个函数，并且myFunction的主体可以简单地放在行内，如下所示：

<script>
var id1 = "41c0236f-ed21-4182-be3d-26513078f704";
var id2 = "41c0236f-ed21-4182-be3d-26513078f704";
document.getElementById('qr_img').src = document.getElementById('qr_img').src + id2;
</script>

如果您涉及更多逻辑，并且需要对其进行组织（或模块化），则此功能将非常有用。

Answer 2

您可以将其添加到脚本中声明和设置id1变量的下面，

function Window_OnLoad ()
 {

 document.getElementById("qr_img").src="http://chart.apis.google.com/chart?cht=qr&chs=300x300&chld=H|0&chl="+id1;

}

如何将变量插入 <img> src参数？

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-06-04 07:07:15

解决方案2
2 2016-06-05 22:01:45

如何将变量插入 <img> src参数？

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-06-04 07:07:15

解决方案2 2 2016-06-05 22:01:45

解决方案1
2 已采纳 2016-06-04 07:07:15

解决方案2
2 2016-06-05 22:01:45