如何修复：JsBarcode“没有要渲染的元素”。错误答案

【问题标题】：How to fix: JsBarcode "No element to render on." Error如何修复：JsBarcode“没有要渲染的元素”。错误
【发布时间】：2019-07-12 09:58:21
【问题描述】：

我对 JS 和 jQuery 很陌生，所以如果我说/做一些愚蠢的事情，请原谅我。我正在尝试创建一个工具，该工具将使用 jQuery 和 jsBarcode 在 HTML 表中动态地将表数据转换为条形码。我有一个工作表，但是当我尝试将 td 转换为条形码时出现错误。我有一种感觉与操作顺序有关，但我无法弄清楚。这是我在控制台中看到的内容，单击按钮时我的表格未呈现。

Console:JsBarcode.all.min.js:2 Uncaught NoElementException: No element to render on.
    at new e (http://127.0.0.1:61214/JsBarcode.all.min.js:2:9642)
    at j.render (http://127.0.0.1:61214/JsBarcode.all.min.js:2:23674)
    at x (http://127.0.0.1:61214/JsBarcode.all.min.js:2:22568)
    at HTMLButtonElement.<anonymous> (http://127.0.0.1:61214/index4.html:62:19)
    at HTMLButtonElement.dispatch (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:3:10316)
    at HTMLButtonElement.q.handle (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:3:8343)

JSBarcode 需要一个带有 ID 的 SVG 标签才能将文本转换为条形码。像这样：

    <svg id="barcode"></svg>

然后一些像这样的js或jQuery：

    JsBarcode("#barcode", "Hi!");
    // or with jQuery
    $("#barcode").JsBarcode("Hi!");

我确保检查 jsBarcode 库在表格中使用时不会中断。我已经将我的脚本移到了我的 HTML 的底部，以防是操作顺序问题，但我仍然不相信。这就是为什么我在这里！

代码运行良好，并根据表格数据成功插入带有正确 id 的 svg 标签。但是一旦我从 jSBarcode 插入我的 javascript 并使用这样的适当变量，它就会中断

JsBarcode(canvas, currValue);

这是我的代码：

HTML

<html>
<head>
    <title>Dynamic Table</title>
    <script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <script src="JsBarcode.all.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div style="margin-top: 50px; margin-left: 250px; margin-right: 250px;">
    <button>Create Table</button>
    <div id="tableDiv" style="margin-top: 40px">
        Table will gentare here.
    </div>
</div>
<p id="p1"></p>

脚本：

<script>

      var json_obj  = {
          "name":"John",
          "age":30,
          "cars": [
        { "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
        { "name":"BMW", "models":[ "320", "X3", "X5" ] },
        { "name":"Fiat", "models":[ "500", "Panda","550" ] }
    ]
 }

//Create table and fetch data from JSON Object.
        $(document).ready(function(){
            $("button").click(function(){
              var number_of_rows = json_obj.cars.length;
              var k = 0;
              var table_body = '<table border="1" id="example"><thead><tr><th>Cars</th><th>Models</th></tr></thead><tbody>';
              for(j in json_obj.cars){
              for(i =0;i<json_obj.cars.length;i++){
                    table_body+='<tr>';
                    table_body +='<td>';
                    table_body +=json_obj.cars[k]["name"];
                    table_body +='</td>';


                    var currVal = json_obj.cars[k].models[i];//pulls data

                    var stringy = JSON.stringify(currVal);    //stringifies data| Needed?
                    var currValue = stringy.replace(/["']/g, "");//removes quotes and creates valid var
                    console.log(currValue);                     //logging
                    var canvas = "#"+currValue;                 //creates id string for svg tags
                    console.log(canvas);                        //logging

                    table_body +='<td><svg id="'+currValue+'"></svg>';//adds svg block to HTML with data specifc id

                    table_body +=json_obj.cars[k].models[i];     //adds data string

                  //JsBarcode(canvas, currValue);//jsBarcode Translation BREAKS CODE HERE!!


                    table_body +='</td>';

                    table_body+='</tr>';
              }
              k++;
            }
          table_body+='</tbody></table>';
          $('#tableDiv').html(table_body);
          //display data.......
    });

});

我的目标是让它根据其中的数据在TD标签内添加条形码。

【问题讨论】：

标签： javascript jquery html-table barcode

【解决方案1】：

变量 canvas 在您的示例中是一个字符串，但 JsBarcode 需要一个 Element 或 HTML DOM 对象。像这样：

var canvas = document.getElementById(currValue);

或：

var canvas = $('#'+currValue)[0];

不确定这是否能解决您的问题。我不使用 jQuery 或 JsBarcode。

【讨论】：

【解决方案2】：

问题似乎是脚本在页面加载完成之前运行，因此无法找到具有您指定的 ID 的元素以生成条形码。

将脚本标签（JsBarcode、jQuery）放在底部，即在结束正文标签（</body>）之前，或者在顶部添加一个 defer 属性，这样它只在页面完成加载并生成时运行之后的条形码，如下所示：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" defer>
    </script>
<script src="JsBarcode.all.min.js" defer></script>

【讨论】：

【解决方案3】：

这个问题看起来是在页面加载完成之前脚本正在运行，你应该使用这个生命周期方法更新

updated(){
     JsBarcode("#barcode", "Hi!");
    }

然后它应该工作:)

【讨论】：