Question

我正在尝试使用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。有人请帮我解决这个问题。提前致谢。

Answer 1

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

将段落的ID设置为Test1而不是Text，然后找到元素。

Answer 2

在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>"

    }
}

BarcodeScanner2 = TypeError：无法设置属性＆lt; innerHTML＆＃39;为null

2 个答案: