使用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; 
 
}