你好
我有以下问题。我已经编程了一个Qr代码生成器。现在，当我点击按钮"；点击我"应该生成新的QR码并替换旧的QR码。不幸的是，它并没有取代旧的Qrcode，而是将新的放在下面。
这是我的HTML和JS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initialscale=1">
</head>
<body>
<select name= "Bauart" id= "qr-data">
<option value="1">test</option>
<option value="ad">test 2</option>
</select>
<button onclick="myFunction()">Click me</button>
<div id="qrcode"></div>
<br>
</body>
<script src="qrcode.min.js"></script>
<script src="javascript.js"></script>
</html>
这是JS
function myFunction() {
var qrdata = document.getElementById('qr-data').value;
var qrcode = new QRCode(document.getElementById('qrcode'));
qrcode.makeCode(qrdata);
}
<style>
/* CSS comes here */
body {
padding:20px;
}
input {
padding:5px;
background-color:transparent;
border:none;
border-bottom:solid 4px #8c52ff;
width:250px;
font-size:16px;
}
.qr-btn {
background-color:#8c52ff;
padding:8px;
color:white;
cursor:pointer;
}
</style>
<h3>QR Code Generator</h3>
<div><input id="qr-text" type="text" placeholder="Text to generate QR code"></div>
<br>
<div>
<button class="qr-btn" onclick="generateQRCode()">Create QR Code</button>
</div>
<br>
<p id="qr-result">This is deault QR code:</p>
<canvas id="qr-code"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
<script>
/* JS comes here */
var qr;
(function() {
qr = new QRious({
element: document.getElementById('qr-code'),
size: 200,
value: 'https://setools.xyz'
});
})();
function generateQRCode() {
var qrtext = document.getElementById("qr-text").value;
document.getElementById("qr-result").innerHTML = "QR code for " + qrtext +":";
alert(qrtext);
qr.set({
foreground: 'black',
size: 200,
value: qrtext
});
}
</script>这是的全套代码