Qr Code generator doesn't replace old qr code

Question

Hello!

I have the following problem. I have programmed a Qr Code generator. Now when I click on the Button "Click Me!" a new QR-Code should be generated and replace the old one. Unfortunately it doesn't replace the old Qrcode but puts the new one under it.

here is my HTML and 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>

and here is the JS

function myFunction() {
    var qrdata = document.getElementById('qr-data').value;
    var qrcode = new QRCode(document.getElementById('qrcode'));
    qrcode.makeCode(qrdata);
}

In my opinion using `.value` for select elements isn't recommended. See https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript — Reporter, Jan 12 '21 at 09:39
qrcode.clear(); doesnt seems to work i putt it before the makeCode line — obind, Jan 12 '21 at 09:46

score 2 · Accepted Answer · answered Feb 18 '21 at 18:25

<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>

Here is the full set of code

Qr Code generator doesn't replace old qr code

1 Answers1