JavaScriptでqrコードジェネレーターを作る方法

QR コード ジェネレーターを作成するのは、インターネット上で入手可能な既存のものがあるため、非常に簡単です.

Source Code Of This Blog
Try Out The QRCODE Generator We Are Going To Make In This Blog

    <input type="text" onchange="generateQR()" id="url" 
    placeholder="Place Your Url">
    <button id="makeQR">
        Generate QR Code
    </button>
    <div id="output"></div>
    <script src="qrcode.min.js"></script>
    <script src="main.js"></script>

let qrcode = new QRCode(document.getElementById('output'));
let qrdata = document.getElementById('url');
let makeQr = document.getElementById('makeQR')

function generateQR() {
    var data = qrdata.value;
    qrcode.makeCode(data)
}

makeQr.addEventListener('click', function() {
    generateQR()
})

これで、これを作成するために理解しなければならないコードはすべて終わりました.

まず最初に、download this から https://davidshimjs.github.io/qrcodejs/ をダウンロードする必要があります.これは、基本コードが私のものではないため、ダウンロードする必要があります.

さて、まずhtmlを作成します

    <input type="text" onchange="generateQR()" id="url" 
    placeholder="Place Your Url">
    <button id="makeQR">
        Generate QR Code
    </button>
    <div id="output"></div>
    <script src="qrcode.min.js"></script>
    <script src="main.js"></script>

最初に、入力ボックスを作成し、onchange="generateOR()"を与えます.これは、main.js で作成している関数であり、ID も与えます.
次に、ボタンを作成し、ID も指定します.
ここでのみqrコードを表示するため、これを作成し、最後にスクリプトをインポートします(main.jsは作成中のコードで、qrcode.min.jsはベースコードです).

let qrcode = new QRCode(document.getElementById('output'));
let qrdata = document.getElementById('url');
let makeQr = document.getElementById('makeQR')

function generateQR() {
    const data = qrdata.value;
    qrcode.makeCode(data)
}

makeQr.addEventListener('click', function() {
    generateQR()
})

最初の 3 行では、html で指定したすべての ID を document.getElementById を使用してインポートしています.

let qrcode = new QRCode(document.getElementById('output'));

この行では、新しい QRCode を作成しています.これは重要です.qrcode.min.js に何かがあるため、div をインポートするときに新しい QRCode を記述すると、これが表示される div であることが自動的に検出されます.生成されたqr.

function generateQR() {
    const data = qrdata.value;
    qrcode.makeCode(data)
}

ここでは、generateOR 関数 ( html で使用) を作成し、data という名前の const を作成し、qrdata.value (その入力ボックスの値) を取得しています.最後に、qrcode.makeCode(data) ( qrcode はその div ) と makeCode を追加していますQRコードを生成することを意味し、(データ)メニューqrdata.value(入力ボックスの値)

リンクを書いてEnterキーを押すと、このコードも機能するはずですが、ボタンをクリックしたときにqrcodeも表示されるようにしたい場合は、

makeQr.addEventListener('click', function() {
    generateQR()
})

ここでは、イベント リスナー 'click' を追加し、それに generateOR() 関数を渡すだけで、多くのことを行っていません.

最後まで読んでくれてありがとう follow me on github と star this repo