Fatal编程技术网
  • javascript/
  • Javascript 如何将变量插入<；img>；src参数？

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

javascript html

Javascript 如何将变量插入<；img>；src参数？,javascript,html,Javascript,Html,我试图在我的网页上生成二维码，其中包含我从web服务获得的数据（id）。我不知道如何将javascript变量作为 如您所见，我可以使用myFunction（单击按钮后）更改src。但我不知道如何在初始页面加载中插入id变量（替换img行末尾的ID1_GOES_）。 请帮忙 下面是一个代码： <!DOCTYPE html> <head> <meta charset="utf-8"> <title>TEST</title>

我试图在我的网页上生成二维码，其中包含我从web服务获得的数据（id）。我不知道如何将javascript变量作为

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

下面是一个代码：


<!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>




试验
var id1=“41c0236f-ed21-4182-be3d-26513078f704”；
函数myFunction（）{
var id2=“41c0236f-ed21-4182-be3d-26513078f704”；
document.getElementById（'qr\u img'）。src=”http://chart.apis.google.com/chart?cht=qr&chs=300x300&chld=H|0&chl=“+id2；
}
测试

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


<!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>


对于这个简单的例子，您可能根本不需要函数，
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>




var id1=“41c0236f-ed21-4182-be3d-26513078f704”；
var id2=“41c0236f-ed21-4182-be3d-26513078f704”；
document.getElementById（'qr\u img'）.src=document.getElementById（'qr\u img'）.src+id2；



如果涉及更多逻辑，并且需要组织（或模块化）该函数，则该函数将非常有用。
您可以将其添加到下面的脚本中，在脚本中声明并设置id1变量


function Window_OnLoad ()
 {

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

}



您想更改qr_img的src吗？我想将id1内容添加到src param的末尾，这样API将生成带有此stringtry包装的qr代码（）。document.getElementById（'qr_img'）.src（“）感谢您的扩展回复。但是我应该在src参数的末尾加上什么（现在这里有“ID1_GOES_”？基本上脚本会覆盖以前的内容。不是吗？@AlanKhabitsov实际上，您可以完全删除这里的“ID1_GOES_”只需将值附加到它。我已更新了答案以显示如何执行此操作。代码将
id2
附加到现有的
.src
属性，如果您取消“ID1”选项，该属性将起作用Javascript代码确实替换了HTML中的值，因此您可以将整个内容编写为Javascript并使用
src=“”
如果您愿意，可以使用HTML。任何一种方法都有效，如果您想要一个示例，我可以将其添加到我的答案中。Michael，这已经足够了。我得到了所有答案。感谢您的时间。谢谢！

function Window_OnLoad ()
 {

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

}