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

这是我的jQuery

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


因此,这将获得用户的输入值,并在单击按钮时生成QR码。
但是每次我单击“生成按钮”时,它都会在新行中生成一个新的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-
它创建一个QR码列表。我该如何解决这个问题?
我希望每次单击“生成”按钮时只显示一个QR码

最佳答案

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



$(".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);
});


让我知道是否有效

10-05 20:45
查看更多