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>
See Question&Answers more detail:os