Question

我正在使用此存储库qrcode生成QR码

这是我的Jquery

    $(".generatetext").click(function() {
        var x = document.getElementById("textdata").value;
        $('#output').qrcode(x);
    });

因此，这将获取用户的输入值，并在单击按钮时生成QR代码。但每次我点击“生成按钮”时，它会在新行中生成一个新的QR码，不会替换现有的二维码。

<canvas width="256" height="256"></canvas>-> on first click
<canvas width="256" height="256"></canvas>-> on second click
<canvas width="256" height="256"></canvas>-> on third click

DEMO - ＆lt; - 生成2或3个qr代码

它会创建一个QR码列表。我该如何解决这个问题？我希望每次单击Generate按钮

时只显示一个QR码

Answer 1

请查看下面的工作解决方案。

$(".generatetext").click(function(e) {
    e.preventDefault();
    var x = $("#textdata").val();
    $('#output').html('').qrcode(x);
});

#output{border:1px solid #eee;min-height:200px;width:200px;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<div class="container">
  <form class="form-inline">
    <div class="form-group">
      <button class="btn btn-primary generatetext">Generate QR Code</button>
      <input type="text" class="form-control" id="textdata" placeholder="Enter text for QR Code" />
    </div>
  </form>
  <div class="container">
    <div id="output" class="text-center"></div>
  </div>
</div>

请检查下面提到的解决方案。

$(".generatetext").click(function() {
    var x = document.getElementById("textdata").value;
     $('#output').html('').qrcode(x);
});

如果不起作用，请告诉我

HTML 5 Canvas和QR Code

1 个答案: