BarcodeScanner2 = TypeError：无法将属性“innerHTML”设置为 null答案

【问题标题】：BarcodeScanner2 = TypeError: Cannot set property 'innerHTML' of nullBarcodeScanner2 = TypeError：无法将属性“innerHTML”设置为 null
【发布时间】：2014-08-20 14:14:24
【问题描述】：

我正在尝试在 android 中使用 phonegap-1.4.1 开发条形码扫描应用程序。我试图将所有值存储在数组code[] 中，稍后我将使用数组显示值。我正在创建一个local storage 的值。这是我对数组和计数器的声明。

localStorage["counter"]=0;
 var code = ["Test1", "Test2","Test3", "Test4"];
 localStorage.setItem("code", JSON.stringify(code));

这是我用于扫描条形码的 javascript 文件，我在其中使用递归函数，以便应用程序继续扫描并将值存储在数组中。

 var scanCode = function () {
      window.plugins.barcodeScanner.scan(
          function (result) {
      if(result.cancelled == true ) {
          window.location.href = 'page5.html';
       } else {
       var test2 = JSON.parse(localStorage.getItem("code"));
        var k = parseInt(localStorage.getItem("counter"));
        document.getElementById(test2[k]).innerHTML = "result.text";
         k++;
           localStorage["counter"] = k;
          alert("Scanned Code: " + result.text + ". Format: " + result.format + ". Cancelled: " + result.cancelled);
          scanCode();}

          }, function (error) {
              alert("Scan failed: " + error);
              window.location.href = 'page5.html';
          });
  }

在存储值之后，我将某些 page5.html 中的值显示为

                  <tr>
                    <td >1</td>
                    <td>
                      <p id="Test1"></p></td>
                </tr>

但我收到的错误是BarcodeScanner2 = TypeError: Cannot set property 'innerHTML' of null。有人请在这个问题上帮助我。提前致谢。

【问题讨论】：

标签： javascript html arrays cordova local-storage

【解决方案1】：

在您的 html 文件中添加下面的 javascript 函数（页面顶部）。

function SaveDataToLocalStorage(barcodeValue)
{

    var oldItems = JSON.parse(localStorage.getItem('barcodes')) || [];
    var newItem = {
        'barcode': barcodeValue
    };
    oldItems.push(newItem);
    localStorage.setItem('barcodes', JSON.stringify(oldItems));

}

现在更改您的条形码扫描代码如下：

var scanCode = function () {
      window.plugins.barcodeScanner.scan(function (result) {
         if(result.cancelled == true ) {
           window.location.href = 'page5.html';
         } else {
           // below function save your data in localstorage.
           SaveDataToLocalStorage(result.text);
           scanCode();
         }

     }, function (error) {
            alert("Scan failed: " + error);
           window.location.href = 'page5.html';
    });
  }

现在，如果您想在 page5.html 中显示所有条形码，只需从 localstorage 中读取所有条形码并将其显示在页面中即可。

使用以下函数page5.html显示page5.html中的所有条码

function displayValues()
{
    var oldItems = JSON.parse(localStorage.getItem('barcodes')) || [];

    for(var i=oldItems.length-1;i>=0;i--)
    {
        var html=document.getElementById("allCodes").innerHTML;
        document.getElementById("allCodes").innerHTML=html+"<br>"+oldItems[i].barcode;      
    }    
}

在page5.html中创建一个div名称allCodes

您的 page5.html

<body>
<div id="allCodes">

</div>

</body>
<script>
function displayValues()
{
    var oldItems = JSON.parse(localStorage.getItem('barcodes')) || [];

    for(var i=oldItems.length-1;i>=0;i--)
    {
        var html=document.getElementById("allCodes").innerHTML;
        document.getElementById("allCodes").innerHTML=html+"<br>"+oldItems[i].barcode;      
    }    
    }
displayValues();
</script>

//在表格中显示：

function displayValues()
{
    var oldItems = JSON.parse(localStorage.getItem('barcodes')) || [];

    if(oldItems.length>0)
    {
        document.getElementById("allCodes").innerHTML="<table border='2'>";
    }
    for(var i=oldItems.length-1;i>=0;i--)
    {
        var html=document.getElementById("allCodes").innerHTML;
        html=html+"<tr><td>"+oldItems[i].barcode+"</td></tr>";
        document.getElementById("allCodes").innerHTML=html;   
    }    
    if(oldItems.length>0)
    {
        var old=document.getElementById("allCodes").innerHTML;
        document.getElementById("allCodes").innerHTML=old+"</table>"

    }
}

【讨论】：

让我们continue this discussion in chat。

【解决方案2】：

这个错误显然与document.getElementById(test2[k]) 没有返回元素有关，因此，没有给定 id 的元素。在您的示例中，这将是 Test1。

将段落的 id 设置为 Test1 而不是 Text 并找到元素。

【讨论】：

对不起。这只是在这里写的时候打字错误。我为这个错误道歉。
Test1 和Text1 还是有区别的。（s 与 x）
但该元素仍然不存在。 test2[k] 的值是多少？
它是一个类似于code[]的数组，我将对应barcode的值存储在test2[k]中。
可以，但是有问题，能不能给出当时的实际值？