Skip to content Skip to sidebar Skip to footer
Home / Arrays / Cordova / Html / Javascript / Local Storage

Barcodescanner2 = Typeerror: Cannot Set Property 'innerhtml' Of Null

Post a Comment
I am trying to develop a barcode scanning app using phonegap-1.4.1 in android. I am trying to store all the values in an array code[] and later on I am displaying the values using

Solution 1:

Add below javascript Function in your html file ( top of the page).

functionSaveDataToLocalStorage(barcodeValue)
{

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

}

Now Change Your barcode Scan Code as below :

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';
    });
  }

Now, if you want to display all barcodes in page5.html just read all barcodes from localstorage and display it in page.

use following function page5.html to display all barcodes in page5.html

functiondisplayValues()
{
    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;      
    }    
}

make one div name allCodes in page5.html

Your page5.html

<body><divid="allCodes"></div></body><script>functiondisplayValues()
{
    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>

//Display in table :

functiondisplayValues()
{
    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>"

    }
}

Solution 2:

The error is clearly related to document.getElementById(test2[k]) returning no element, hence, there is no element with the id given. In your sample this would be Test1.

Set the id of the paragraph to Test1 instead of Text and it find the element.

Post a Comment for "Barcodescanner2 = Typeerror: Cannot Set Property 'innerhtml' Of Null"