qr code generator dosent replace old qr code

Question

Hello my english is not really good. i build a little qr code generator but i have some problems with it. when i press two times on my "click me" button it dosent replace the old qr code with the new one it makes a new one and place it under the old one but i want replace the old one

here is my html and javascript

    <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=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 javascript

    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 1 · Answer 1 · 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 dosent replace old qr code

1 Answers1