分离QRcode图像生成器Javascript / HTML的代码 [英] Separating code for QRcode image generator Javascript/HTML
问题描述
当我仅在HTML上测试代码时，它工作得很好，但是当我将它分开时它不显示-surprise - 这是我的代码：
<！DOCTYPE html>
< html>
< body>
< img id ='qrcode'src =''>
< button onclick =newQR（）> Gerar QR码< / button>
< script>
function newQR（）{
var x = Math.floor（（Math.random（）* 99）+ 1）;
document.getElementById（'qrcode'）。src =https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=+ x
}
newQR（）
< / script>
< / body>
< / html>
编辑：我想将它们分开，例如，在script.js中使用newQR函数，如下所示：
script.js
function newQR（）{
var x =（Math.random（）* 99999999999999999）;
document.getElementById（'qrcode'）。src =https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=+ x
return
}
index.html
<！DOCTYPE html>
< html>
< body>
< button onclick =newQR（）> Gerar QR码< / button>
< img ='qrcode'/>
< script type =js / javascriptsrc =script.js>< / script>
< / body>
< / html>
您的问题可能只是您忘记了 id 此行中的属性 HTML < img ='qrcode'/>
尝试将其更改为：< img id ='qrcode'src =''>
但是，如果在尝试之后......问题仍然存在，那么我建议您尝试下面的示例。
$ b 将您的
HTML 标记更改为： <身体GT;
< img id ='qrcode'src =''>
< button id =Btn> Gerar QR码< / button>
< script type =text / javascriptsrc =script.js>< / script>
< / body>
在您的 javascript 文件中，
document.getElementById（Btn）。addEventListener（click，function（）{
var x = （Math.random（）* 99999999999999999）;
document.getElementById（'qrcode'）。src =https://api.qrserver.com/v1/create-qr-code/?size=150x150&data =+ x;
}）;
或这个版本的javascript，如果您愿意的话：
document.getElementById（Btn）。addEventListener（click，newQR）;
function newQR（）{
var x =（Math.random（）* 99999999999999999）;
document.getElementById（'qrcode'）。src =https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=+ x;
}
When I tested the code only on HTML it worked just fine, but when I separate it doesn't show -surprise - here's my code:
<!DOCTYPE html>
<html>
<body>
<img id='qrcode' src=''>
<button onclick="newQR()">Gerar QRcode</button>
<script>
function newQR() {
var x = Math.floor((Math.random() * 99) + 1);
document.getElementById('qrcode').src = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + x
}
newQR()
</script>
</body>
</html>
EDIT: I want to separate them, for example, having the function newQR inside script.js and the rest inside index.html, like this:
script.js
function newQR() {
var x = (Math.random() * 99999999999999999);
document.getElementById('qrcode').src ="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + x
return
}
index.html
<!DOCTYPE html>
<html>
<body>
<button onclick="newQR()">Gerar QRcode</button>
<img = 'qrcode' />
<script type="js/javascript" src="script.js"></script>
</body>
</html>
Your problem could simply be that you've forgotten the id attribute within this line of your HTML <img = 'qrcode' />
Try changing that to this: <img id='qrcode' src=''>
However, if after trying... the problem at hand still persists then I'd recommend you to try the examples below.
Change your HTML markup to this:
<body>
<img id='qrcode' src=''>
<button id="Btn">Gerar QRcode</button>
<script type="text/javascript" src="script.js"></script>
</body>
Within your javascript file simply implement this:
document.getElementById("Btn").addEventListener("click", function(){
var x = (Math.random() * 99999999999999999);
document.getElementById('qrcode').src ="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + x;
});
or this version of javascript if you prefer:
document.getElementById("Btn").addEventListener("click", newQR);
function newQR() {
var x = (Math.random() * 99999999999999999);
document.getElementById('qrcode').src ="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + x;
}
这篇关于分离QRcode图像生成器Javascript / HTML的代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
