在JavaScript HTML中呈现具有相同ID的多个元素_Javascript_Html_Node.js_Browser

在JavaScript HTML中呈现具有相同ID的多个元素

javascript html node.js browser

在JavaScript HTML中呈现具有相同ID的多个元素,javascript,html,node.js,browser,Javascript,Html,Node.js,Browser,我试图在一个HTML页面中呈现多个具有相同ID的条形码。下面是我的代码 <html> <head> <meta charset="UTF-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.3/JsBarcode.all.min.js"></script> </head> <

我试图在一个HTML页面中呈现多个具有相同ID的条形码。下面是我的代码

    <html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.3/JsBarcode.all.min.js"></script>
</head>
<body>

<img id="barcode"
 
  jsbarcode-value="123456"
 />

<img id="barcode"
  
  jsbarcode-value="654321"
 />
<script>
      var element = document.querySelectorAll("#barcode");
      for(var i = 0; i < element.length; i++)     
      JsBarcode(element, {
        format: "code39",
        lineColor: "#0aa",
        width: 4,
        height: 40,
        displayValue: false
});
      </script>
</body>
</html>


var元素=document.queryselectoral（“条形码”）；
对于（变量i=0；i


但当我在Chrome中打开时，我得到了一个空页面。
请帮助我如何使用唯一ID进行渲染。
在for循环中存在错误
将JsBarcode作为数组元素的第一个属性传入
那样正确吗
  var element = document.querySelectorAll("#barcode");
  [].forEach.call(element, function(elem){
    JsBarcode(elem, {
    
    format: "code39",
    lineColor: "#0aa",
    width: 4,
    height: 40,
    displayValue: false
    });
  })

在for循环中有一个错误
将JsBarcode作为数组元素的第一个属性传入
那样正确吗
  var element = document.querySelectorAll("#barcode");
  [].forEach.call(element, function(elem){
    JsBarcode(elem, {
    
    format: "code39",
    lineColor: "#0aa",
    width: 4,
    height: 40,
    displayValue: false
    });
  })

在html页面上不能有多个具有相同值的id。
对于您的情况，一种解决方案是使用类更改id，然后使用选择器使用类
将id=“barcode”更改为class=“barcode”，然后
在html页面上不能有多个具有相同值的id。
对于您的情况，一种解决方案是使用类更改id，然后使用选择器使用类
将id=“barcode”更改为class=“barcode”，然后
所以，问题是传入JsBarcode方法的第一个参数是一个元素。您需要传递jquery id字符串。如果查看他们的文档，它包含以下内容：
JsBarcode("#barcode", "1234", {
format: "pharmacode",
lineColor: "#0aa",
width: 4,
height: 40,
displayValue: false
});

<svg name="barcode" 
  jsbarcode-value="123456"
/>

<svg name="barcode"
  jsbarcode-value="654321"
/>

<script>
  var elements = document.getElementsByName("barcode");
  for(var i = 0; i < elements.length; i++)        {
  var id = elements[i].name + "i";
  elements[i].id = id;
  var value = elements[i].getAttribute("jsbarcode-value");
  JsBarcode("#" + id, value, {
    format: "code39",
    lineColor: "#0aa",
    width: 4,
    height: 40,
    displayValue: false
  });
}     
</script>

请注意，第一个参数是“#条形码”，而不是实际的元素。在您的情况下，看起来您正在传入的元素不是JsBarcode所期望的。我看到了您的问题，我能够通过以下方式解决：
JsBarcode("#barcode", "1234", {
format: "pharmacode",
lineColor: "#0aa",
width: 4,
height: 40,
displayValue: false
});

<svg name="barcode" 
  jsbarcode-value="123456"
/>

<svg name="barcode"
  jsbarcode-value="654321"
/>

<script>
  var elements = document.getElementsByName("barcode");
  for(var i = 0; i < elements.length; i++)        {
  var id = elements[i].name + "i";
  elements[i].id = id;
  var value = elements[i].getAttribute("jsbarcode-value");
  JsBarcode("#" + id, value, {
    format: "code39",
    lineColor: "#0aa",
    width: 4,
    height: 40,
    displayValue: false
  });
}     
</script>


var elements=document.getElementsByName（“条形码”）；
对于（var i=0；i

总之，我将页面上的所有元素改为name=“barcode”而不是id。然后使用name和for循环中的incrementor设置id，该循环用于将唯一id传递到JsBarcode并从属性中获取值。
所以问题是传递到JsBarcode方法的第一个参数是一个元素。您需要传递jquery id字符串。如果查看他们的文档，它包含以下内容：
JsBarcode("#barcode", "1234", {
format: "pharmacode",
lineColor: "#0aa",
width: 4,
height: 40,
displayValue: false
});

<svg name="barcode" 
  jsbarcode-value="123456"
/>

<svg name="barcode"
  jsbarcode-value="654321"
/>

<script>
  var elements = document.getElementsByName("barcode");
  for(var i = 0; i < elements.length; i++)        {
  var id = elements[i].name + "i";
  elements[i].id = id;
  var value = elements[i].getAttribute("jsbarcode-value");
  JsBarcode("#" + id, value, {
    format: "code39",
    lineColor: "#0aa",
    width: 4,
    height: 40,
    displayValue: false
  });
}     
</script>

请注意，第一个参数是“#条形码”，而不是实际的元素。在您的情况下，看起来您正在传入的元素不是JsBarcode所期望的。我看到了您的问题，我能够通过以下方式解决：
JsBarcode("#barcode", "1234", {
format: "pharmacode",
lineColor: "#0aa",
width: 4,
height: 40,
displayValue: false
});

<svg name="barcode" 
  jsbarcode-value="123456"
/>

<svg name="barcode"
  jsbarcode-value="654321"
/>

<script>
  var elements = document.getElementsByName("barcode");
  for(var i = 0; i < elements.length; i++)        {
  var id = elements[i].name + "i";
  elements[i].id = id;
  var value = elements[i].getAttribute("jsbarcode-value");
  JsBarcode("#" + id, value, {
    format: "code39",
    lineColor: "#0aa",
    width: 4,
    height: 40,
    displayValue: false
  });
}     
</script>


var elements=document.getElementsByName（“条形码”）；
对于（var i=0；i

总之，我将页面上的所有元素更改为name=“barcode”而不是id。然后使用name和for循环中的incrementor设置id，该循环用于将唯一id传递到JsBarcode并从属性中获取值。
我没有得到生成的最后一个条形码，我们需要在循环中检查什么吗？假设我有3个位置需要生成条形码，我得到前两个位置，但第三个位置不显示。但当我重新加载页面时，它正在加载。条形码是如何生成的？因为这在重新加载页面时起作用，所以我假设在循环运行时所有条形码都没有生成？我有一个HTML代码，它根据变量i生成。假设I=3，HTML代码运行3次并附加到同一个文件。创建第一个HTML文件，其余的2倍附加到第一个文件以创建单个HTML文件OK，因此您需要在该过程完成之前不运行脚本。有几种方法可以做到这一点。如果可能的话，最简单的方法就是把上面的方法变成一个方法，并在第一个进程完成时调用它。你能更新代码吗？我的JS不是很好。谢谢我没有得到最后生成的条形码，我们需要在循环中检查什么吗？假设我有3个位置需要生成条形码，我得到前两个位置，但第三个位置不显示。但当我重新加载页面时，它正在加载。条形码是如何生成的？因为这在重新加载页面时起作用，所以我假设在循环运行时所有条形码都没有生成？我有一个HTML代码，它根据变量i生成。假设I=3，HTML代码运行3次并附加到同一个文件。创建第一个HTML文件，其余的2倍附加到第一个文件以创建单个HTML文件OK，因此您需要在该过程完成之前不运行脚本。有几种方法可以做到这一点。如果可能的话，最简单的方法就是把上面的方法变成一个方法，并在第一个进程完成时调用它。你能更新代码吗？我的JS不是很好。非常感谢。