HTML 5 Canvas und QR Code

Question

Ich verwende dieses Repository qrcode QR-Codes

Das ist mein JQuery

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

so erhält diese den Eingangswert des Benutzers zu erzeugen, und erzeugt den QR-Code auf Klicken Sie auf eine Schaltfläche. aber jedes Mal, wenn ich auf "Generate Button" klicke, wird ein neuer QR-Code in einer neuen Zeile generiert, der den bestehenden Code nicht ersetzt.

<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 - < - generieren 2 oder 3 qr Codes

es eine Liste von QR-Codes erzeugt. Wie löse ich dieses Problem? Ich möchte, dass nur ein QR-Code angezeigt wird, wenn ich auf die Schaltfläche "Generate" klicke

Answer 1

Bitte überprüfen Sie die Arbeitslösung unten.

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

Bitte überprüfen Sie unten genannten Lösung.

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

Lassen Sie mich wissen, ob es