Uncaught TypeError: Cannot set property 'innerHTML' of null in phonegap

Question

I am trying a pass an array consisting of barcode scanned code in my barcode scannin app using phonegap plugins. I am getting an error "Uncaught TypeError: Cannot set property 'innerHTML' of null ". In the following code I have used a var k=0; and have declared an array var code= new Array(100); in the javascript file previously.

here is my html file

<!doctype html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" src="barcodescanner.js"></script>
  <script type="text/javascript" src="main.js"></script>
    </head>
   <body>
     <p />
      <p />
         <div  ng-controller="controller">
     <table ng-repeat="result in results">
                <tr>
                    <td>
                      S.No
                    </td>
                    <td >
                    Barcode
                    </td>

                </tr>
                <tr>
                    <td >
                       1
                    </td>
                    <td
                  id="d">
                  </td>                       
                </tr>
                <tr>
                    <td >
                       2
                    </td>
                    <td
                       id="code[0]">
                    </td>
                </tr>
                <tr>
                    <td >
                       3
                    </td>
                    <td
                        id="code[1]">
                    </td>
                    </tr>
        <tr><td><input class="butt" type="button" value="New Scan" onclick="scanCode();" /></td></tr>
            </body>
     <script type="text/javascript">
       var barcodeVal = localStorage.getItem("myvalue");
       document.getElementById("d").innerHTML = barcodeVal;
       </script>
    <script type="text/javascript">
        var scanCode = function () {
         window.plugins.barcodeScanner.scan(
           function (result) {

               alert("Scanned Code: " + result.text + ". Format: " + result.format + ". Cancelled: " + result.cancelled);
              localStorage.setItem("myvalue1", result.text);
              window.location.href = 'page5.html';

          }, function (error) {
              alert("Scan failed: " + error);
          });
  }
      </script>
      <script type="text/javascript">
      var barcodeVal = localStorage.getItem("myvalue1");
       document.getElementById("code[k]").innerHTML = barcodeVal;
        k=k+1;
      </script>
    </html>

In the following code i am tryin to scan barcode again and again and store the values in an array code[]. But i am getting the error. plz help me. How should i solve the following issue.I am using phonegap-1.4.1 and barcode scanning plugin for android.Thanks in advance.

document.getElementById("code[k]").innerHTML = barcodeVal; is wrong — Butani Vijay, Jun 25 '14 at 06:07
So how should i define it then so that i can store details in that array.plz help me — Raunak, Jun 25 '14 at 06:09
I have defined k as a variable in previous javascript and its initial value is defined as 0. After every scan i am incrementing its value by 1. — Raunak, Jun 25 '14 at 06:19

score 1 · Accepted Answer · answered Jun 25 '14 at 06:11

1

Pease Change :

   <script type="text/javascript">

//space in bas codeVal--is wrong
          var bar codeVal = localStorage.getItem("myvalue1");
           document.getElementById("code[k]").innerHTML = barcodeVal;
            k=k+1;
          </script>

TO:

 <script type="text/javascript">
      var barcodeVal = localStorage.getItem("myvalue1");
      document.getElementById("code[0]").innerHTML = barcodeVal ;
       k=k+1;
   </script>

If your code is an array then use as below:

document.getElementById(code[index]).innerHTML = barcodeVal ;

answered Jun 25 '14 at 06:11

Butani Vijay

4,181
2
29
61

Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/56259/discussion-between-butani-vijay-and-raunak). – Butani Vijay Jun 25 '14 at 09:01
i think you want to print every scan value in table. may i right? – Butani Vijay Jun 25 '14 at 09:03
yeah i am getting barcodeval. I tried the following code with my array code and var k being defined in different html. var barcodeVal = localStorage.getItem("myvalue1"); code[k] = "code[k]"; document.getElementById(code[k]).innerHTML = barcodeVal; k = k + 1; ..but it didnt work and my values are not printing. – Raunak Jun 25 '14 at 09:18
And the problem is if i define array in same html then when i call that html again , whole array is called again and i would lose the old data stored in it. – Raunak Jun 25 '14 at 09:25
So how should i tackle that?? – Raunak Jun 25 '14 at 09:26
You can you localstorage to store that data. – Butani Vijay Jun 25 '14 at 09:27
You can not directly use code used in page1.html into page2.html. for that you have store it somewhere for you localstorage is best option – Butani Vijay Jun 25 '14 at 09:35
okay. So i have to make a local storage of the array and the variable k. How should i make a localstorage of an array. Can u please tell me. I dont know much abt coding. plz – Raunak Jun 25 '14 at 12:10
Just accept and upvote answer then i continue to answer – Butani Vijay Jun 25 '14 at 12:54
1

localStorage only supports strings. Use JSON.stringify() and JSON.parse(). – Butani Vijay Jun 25 '14 at 12:56
1

For more about solution check : http://stackoverflow.com/questions/3357553/how-to-store-an-array-in-localstorage – Butani Vijay Jun 25 '14 at 12:56
yeah i tried this as localStorage.setItem("k", "1"); var code = []; localStorage["code"] = JSON.stringify(code); for storing k and an arrage code. but this is not working . Can you please help me – Raunak Jun 26 '14 at 06:04

score 1 · Answer 2 · answered Jun 25 '14 at 06:12

1

change this

document.getElementById("code[k]").innerHTML = barcodeVal;

to

document.getElementById(code[k]).innerHTML = barcodeVal;

Because code is an array and you are trying to get element using its index.

answered Jun 25 '14 at 06:12

Bhushan Kawadkar

28,279
5
35
57

I changed the following thing but i am getting the error the array is not defined. I have declared array in my previous javascipt file as var code= my Array(100); please help – Raunak Jun 25 '14 at 06:32
why don't you define it in same file? – Bhushan Kawadkar Jun 25 '14 at 06:36
If i define it in same file as i am calling the html file again and again it would rewrite the whole array. I dont want that to happen. – Raunak Jun 25 '14 at 06:42
are you including this file in previous file? – Bhushan Kawadkar Jun 25 '14 at 06:46
check this for accessing array define in other js file http://stackoverflow.com/questions/5242050/how-to-access-js-array-defined-in-another-js-file – Bhushan Kawadkar Jun 25 '14 at 06:51
Like i have a html file in which under – Raunak Jun 25 '14 at 06:52
You defined code = my Array(100); and it must be code = new Array(100); . replace 'my' with 'new' keyword. – Bhushan Kawadkar Jun 25 '14 at 06:55
Sorry that was just typing mistake in the comment. If i am defining something in a html file, then all the other html file may have access to it. As i have defined an array in under – Raunak Jun 25 '14 at 06:59
yes it should have access to all including html. Check if there are any console errors. – Bhushan Kawadkar Jun 25 '14 at 07:08
Can u please answer the following question. Its the continued version of above. plz http://stackoverflow.com/questions/24424208/uncaught-typeerror-cannot-set-property-innerhtml-of-null – Raunak Jun 26 '14 at 08:33

Uncaught TypeError: Cannot set property 'innerHTML' of null in phonegap

2 Answers2