代码之家  ›  专栏  ›  技术社区  ›  Sharan

使用API构建二维码生成器

  •  0
  • Sharan  · 技术社区  · 8 年前

    this 应用程序编程接口。由于某种原因,我无法找出它出了什么问题。点击 here 在JSFiddle中查看它。

    <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);
    }
    
    1 回复  |  直到 8 年前
        1
  •  1
  •   obe    8 年前

    您需要添加 return false; onclick 处理程序,否则单击该按钮会导致页面在二维码有时间呈现之前刷新(因为该按钮属于 submit

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