单击按钮扫描到 elementbyid？

Question

此示例提示进行条形码扫描，然后将值放入 "scan-input" 框中。这对一个 input/ONE 按钮非常有效。

我的问题是我希望能够添加多个 inputs/buttons，并进行扫描，然后将值放入相应的输入文本框中。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Scandit Web SDK</title>
    <link rel="stylesheet" href="style.css">
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'/>

    <!-- Add the library, as explained on http://docs.scandit.com/stable/web/index.html -->
    <script src="https://cdn.jsdelivr.net/npm/scandit-sdk@4.x"></script>
</head>

<body onclick="console.log('body clicked')">
    <div id="scandit-barcode-picker"></div>
    <div id="input-container">
        <input id="scan-input" type="text" placeholder="Scan Receiver...">
        <button id="scan" onclick="scan()">SCAN
        </button>
    </div>

    <script>
        function scan() {
            startScanning();
        }
        function showScanner() {
            scannerContainer.style.opacity = "1";
            scannerContainer.style.zIndex = "1";
        }
        function hideScanner() {
            scannerContainer.style.opacity = "0";
            scannerContainer.style.zIndex = "-1";
        }
        function startScanning() {
            showScanner();
            if (picker) {
                picker.resumeScanning();
            }
        }
        function stopScanning() {
            hideScanner();
            if (picker) {
                picker.pauseScanning();
            }
        }
        // Configure the library and activate it with a license key
        const licenseKey = "LICENSE_KEY_HERE";
        // Configure the engine location, as explained on http://docs.scandit.com/stable/web/index.html
        const engineLocation = "https://cdn.jsdelivr.net/npm/scandit-sdk@4.x/build"
        ScanditSDK.configure(licenseKey, { engineLocation: engineLocation });
        const scannerContainer = document.getElementById("scandit-barcode-picker");
        scannerContainer.style.opacity = "0";
        scannerContainer.style.zIndex = "-1";
        const scanInput = document.getElementById("scan-input");
        let picker;
        // Create & start the picker
        ScanditSDK.BarcodePicker.create(scannerContainer)
            .then(barcodePicker => {
                picker = barcodePicker;
                // Create the settings object to be applied to the scanner
                const scanSettings = new ScanditSDK.ScanSettings({
                    enabledSymbologies: ["ean8", "ean13", "upca", "upce", "code128", "code39"]
                });
                picker.applyScanSettings(scanSettings);
                picker.on("scan", scanResult => {
                    stopScanning();
                    scanInput.value = scanResult.barcodes[0].data;
                });
                picker.on("scanError", error => alert(error.message));
                picker.resumeScanning();
            })
            .catch(alert);
    </script>
</body>
    <style>#scan:after {display:none;}</style>
</html>`

我希望能够添加多个 buttons/inputs。并通过相应的按钮将其放入扫描输入点。

`<input id="scan-input" type="text" placeholder="Scan Receiver...">
<button id="scan" onclick="scan()">SCAN</button>

<input id="scan-input2" type="text" placeholder="Scan Receiver #2...">
<button id="scan2" onclick="scan()">SCAN</button>`

[text1] [button1] ----- 扫描将值放入 text1 [text2] [button2] ----- 扫描将值放入 text2

Answer 1

这里是你的 HTML 的一个稍微改编的版本（在每个 id 中使用一个数字将帮助我们简化事情）：

<input type="text" id="scan-input1" />
<button type="button" id="scan1">SCAN</button>
<br />
<input type="text" id="scan-input2" />
<button type="button" id="scan2">SCAN</button>

然后，在我们的JavaScript中，我们可以使用下面的函数发送消息给scan-input1如果scan1被按下，scan-input2如果scan-2 ]被按下，依此类推：

[...document.getElementsByTagName('button')].forEach((el) => {
  el.addEventListener('click', (e) => {
    const num = e.currentTarget.id.match(/\d+$/)[0];
    document.getElementById(`scan-input${num}`).value = "Scan Complete";
  });
});

上面的代码：

为每个按钮添加一个点击事件监听器，
从点击按钮的id中获取数字，
使用该数字来定位正确的输入。

上述解决方案的优点是它可以自动缩放。只要您对每个 id（scan3、scan-input3 等）遵循相同的命名约定，每个新按钮和输入都将具有相同的行为。

编辑：您的代码

下面，我已将我的建议插入到您的代码中 - 仅更改最低限度：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Scandit Web SDK</title>
  <link rel="stylesheet" href="style.css">
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />

  <!-- Add the library, as explained on http://docs.scandit.com/stable/web/index.html -->
  <script src="https://cdn.jsdelivr.net/npm/scandit-sdk@4.x"></script>
</head>

<body onclick="console.log('body clicked')">
  <div id="scandit-barcode-picker"></div>
  <div id="input-container">
    <input type="text" id="scan-input1" />
    <button type="button" id="scan1" placeholder="Scan Receiver...">SCAN</button>
    <br />
    <input type="text" id="scan-input2" />
    <button type="button" id="scan2" placeholder="Scan Receiver...">SCAN</button>
    <br />
    <input type="text" id="scan-input3" />
    <button type="button" id="scan3" placeholder="Scan Receiver...">SCAN</button>
    </button>
  </div>

  <script>
    let scanInput;

    [...document.getElementsByTagName('button')].forEach((el) => {
      el.addEventListener('click', (e) => {
        const num = e.currentTarget.id.match(/\d+$/)[0];
        scanInput = document.getElementById(`scan-input${num}`);
        scan();
      });
    });

    function scan() {
      startScanning();
    }

    function showScanner() {
      scannerContainer.style.opacity = "1";
      scannerContainer.style.zIndex = "1";
    }

    function hideScanner() {
      scannerContainer.style.opacity = "0";
      scannerContainer.style.zIndex = "-1";
    }

    function startScanning() {
      showScanner();
      if (picker) {
        picker.resumeScanning();
      }
    }

    function stopScanning() {
      hideScanner();
      if (picker) {
        picker.pauseScanning();
      }
    }
    // Configure the library and activate it with a license key
    const licenseKey = "LICENSE_KEY_HERE";
    // Configure the engine location, as explained on http://docs.scandit.com/stable/web/index.html
    const engineLocation = "https://cdn.jsdelivr.net/npm/scandit-sdk@4.x/build"
    ScanditSDK.configure(licenseKey, {
      engineLocation: engineLocation
    });
    const scannerContainer = document.getElementById("scandit-barcode-picker");
    scannerContainer.style.opacity = "0";
    scannerContainer.style.zIndex = "-1";
    let picker;
    // Create & start the picker
    ScanditSDK.BarcodePicker.create(scannerContainer)
      .then(barcodePicker => {
        picker = barcodePicker;
        // Create the settings object to be applied to the scanner
        const scanSettings = new ScanditSDK.ScanSettings({
          enabledSymbologies: ["ean8", "ean13", "upca", "upce", "code128", "code39"]
        });
        picker.applyScanSettings(scanSettings);
        picker.on("scan", scanResult => {
          stopScanning();
          scanInput.value = scanResult.barcodes[0].data;
        });
        picker.on("scanError", error => alert(error.message));
        picker.resumeScanning();
      })
      .catch(alert);

  </script>
</body>
<style>
  #scan:after {
    display: none;
  }

</style>

</html>`

单击按钮扫描到 elementbyid？

Scan to elementbyid on button click?

javascript

getelementbyid

编辑：您的代码