将标签添加到QR码

Question

I have created a QR code generator. 我创建了一个QR码生成器。 The user can create multiple QR codes. 用户可以创建多个QR码。

I would like the user to be able to name each QR code (referred to as a checkpoint) by writing the desired checkpoint name in the text input field, clicking the Assign Name button and having the text input field disappear, being replaced by the name the user typed into the field. 我希望用户能够通过在文本input字段中写入所需的检查点名称，单击“ Assign Name按钮并使文本input字段消失（由名称替换）来命名每个QR码（称为检查点）用户键入该字段。

The user can input checkpoint names, however, it only works for the first QR code printed, and the label only appears below the QR code. 用户可以输入检查点名称，但是，它仅适用于打印的第一个QR码，并且label仅显示在QR码下方。 Below is the code that I have so far. 下面是我到目前为止的代码。 Any help or suggestions to help me get the ball rolling on this would be very much appreciated. 任何帮助或建议可以帮助我解决这个问题，将不胜感激。 Thank you! 谢谢！

Note: If you try to run this to see the QR codes, you will have to enter something in the text field and press generate. 注意：如果尝试运行此代码以查看QR码，则必须在文本字段中输入一些内容，然后按Generate。 They won't appear automatically. 它们不会自动显示。

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: arial, sans-serif;
    }

    section {
      margin: 50px auto;
      max-width: 350px;
      text-align: center;
    }

    textarea {
      width: 50%;
      height: 50px;
      margin-bottom: 10px;
    }

    #size {
      max-width: 64px;
    }

    label {
      display: inline-block;
      width: 140px;
      text-align: left;
    }
  </style>
  <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
  <section>
    <h1>QR Code Generator</h1>
    <p>Enter a URL or some text bellow and hit the Generate button (<kbd>Ctrl</kbd>+<kbd>Enter</kbd>)!</p>
    <textarea id="textarea" autofocus></textarea>
    <div class="block">
      <label for="size">Size (px):</label>
      <input align="left" id="size" type="number" value="150" min="50" max="500" step="50">
      <label for="amount">Amount of Labels:</label>
      <input align="left" id="amount" type="number" value="1" min="1" max="500" step="1">
      <button id="genQRcode">Generate</button>
    </div>
    <div id="content" style="display: none;"></div>
  </section>
  <p id="demo" align="center"></p>
  <script>
    function myFunction() {
      var x = document.getElementById("cpname").value;
      document.getElementById("demo").innerHTML = x;
    }
  </script>
  <script id="template-qr-code" type="text/html">
    <p> <img id="qrcode" src="{{src}}" /></p>
    <label for="checkpoint"> Checkpoint Name:</label>
    <input id="cpname" type="text" value="">
    <button onclick="myFunction()">Assign Name</button>
  </script>
  <script type="text/javascript">
    window.addEventListener('load', function() {
      var textarea = document.getElementById("textarea"),
        content = document.getElementById("content"),
        amount = document.getElementById("amount"),
        qrTemplate = document.getElementById('template-qr-code');

      function genQRcode() {
        var data = encodeURIComponent(textarea.value),
          size = document.getElementById("size").value,
          chart = "http://chart.googleapis.com/chart?cht=qr&chs=" + size + "x" + size + "&choe=UTF-8&chld=L|0&chl=" + data;
        if (data === "") {
          alert("Please enter valid data!");
          textarea.focus();
          content.style.display = "none";
        } else {
          for (var i = 0; i < amount.value; i++) {
            var qrSrc = qrTemplate.innerHTML;
            qrSrc = qrSrc.replace(new RegExp('{{src}}', 'g'), chart);
            qrSrc = qrSrc.replace(new RegExp('{{i}}', 'g'), i);
            content.insertAdjacentHTML('beforeEnd', qrSrc);
          }
          content.style.display = "";
        }
      }

      document.getElementById("genQRcode").addEventListener("click", genQRcode);
      document.addEventListener("keydown", function(e) {
        if (e.ctrlKey && e.keyCode == 13) {
          genQRcode();
        }
      });
    });
  </script>
</body>
</html>

Answer 1

Your click function 您的点击功能

function myFunction() {
  var x = document.getElementById("cpname").value;
  document.getElementById("demo").innerHTML = x;
}

is getting and setting an element by ID. 正在通过ID获取和设置元素。 That will only ever affect a single element on the page (usually the first one that the browser runs into with that specific id). 那只会影响页面上的单个元素（通常是浏览器使用该特定ID运行的第一个元素）。 You need to use a different selector / way of getting the label you want to change because you can't reuse ids. 您需要使用其他选择器/方式来获取要更改的标签，因为您无法重用ID。

Basically you need to make your label fields distinct so you can actually select them 基本上，您需要使标签字段与众不同，以便您可以实际选择它们

将标签添加到QR码

问题描述

1 个解决方案

解决方案1
1 2018-07-20 15:36:01

将标签添加到QR码

问题描述

1 个解决方案

解决方案1 1 2018-07-20 15:36:01

解决方案1
1 2018-07-20 15:36:01