使用API​​构建QR码生成器

Question

我一直致力于使用this API的QR码生成器。出于某种原因，我无法弄清楚它有什么问题。点击here在JSFiddle中查看它。

HTML：

<form> 
    <input type="text" id="textInput" placeholder="Enter text here"> 
    <button type="submit" id="submitButton">Submit</button> 
</form> 
<!-- This image should display the QR Code. --> 
<img id="resultImage" src="" alt=""> 

的JavaScript：

var input = document.getElementById('textInput'); 
var button = document.getElementById('submitButton'); 
var image = document.getElementById('resultImage'); 
button.onclick = function() { 
    var resultValue = "http://api.qrserver.com/v1/create-qr-code/?data=" + input.value; 
    image.setAttribute("src", resultValue); 
} 

Answer 1

您需要在onclick处理程序的末尾添加return false;，否则点击按钮可以使页面刷新了QR码时间之前（因为按钮类型为submit）

ie

button.onclick = function() { 
 
    var resultValue = "http://api.qrserver.com/v1/create-qr-code/?data=" + input.value; 
 
    image.setAttribute("src", resultValue); 
 
    return false; 
 
}