JSON Uncaught TypeError: Cannot set property 'innerHTML' of null

Question

The question is : Convert your object to a JSON string myString and display it in a somewhere on the page. Here is my code:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title> JSON </title>
  <script>

var fidoString = '{ "name": "Fido", "breed": "Mixed", "weight": 38 }';
var fido = JSON.parse(fidoString);
console.log("We have made a dog out of a string! " + fido.name);


var fido2 = {
    name: "Fido",
    breed: "Mixed",
    weight: 38
};

var fido3 = {
    name: {
        first: "alex",
        second: "doggy"
    },
    breed: "Mixed",
    weight : 30
};
var fidoString = JSON.stringify(fido2);
console.log("We made a string from a dog! " + fidoString);

var x = fido3.name
document.getElementById("lista").innerHTML = x;



  </script>
</head>
<body>
    <div id="lista"></div>
</body>
</html>

I got error: JSON.html:31 Uncaught TypeError: Cannot set property 'innerHTML' of null at JSON.html:31. Can't fix this error and need some help.

score 0 · Answer 1 · answered Sep 26 '17 at 23:42

Your JS will be parsed before the HTML in your body, since the parser reads it top down. And when the code is parsed, the element is not available in the DOM yet.

To solve the issue move the script tag to just before the closing of body tag.

<body>
  <div id="lista"></div>
</body>

<script>
  var fidoString = '{ "name": "Fido", "breed": "Mixed", "weight": 38 }';
  var fido = JSON.parse(fidoString);
  console.log("We have made a dog out of a string! " + fido.name);


  var fido2 = {
    name: "Fido",
    breed: "Mixed",
    weight: 38
  };

  var fido3 = {
    name: {
      first: "alex",
      second: "doggy"
    },
    breed: "Mixed",
    weight: 30
  };
  var fidoString = JSON.stringify(fido2);
  console.log("We made a string from a dog! " + fidoString);

  var x = fido3.name
  document.getElementById("lista").innerHTML = x;
</script>

score 0 · Accepted Answer · answered Sep 26 '17 at 23:43

You need to move the <script>-tag to the bottom of the <body>-tag. At the moment, the script is executing before the element <div id="lista"> exists. Like this:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title> JSON </title>
</head>
<body>
    <div id="lista"></div>
    <script type="text/javascript">
    var fidoString = '{ "name": "Fido", "breed": "Mixed", "weight": 38 }';
    var fido = JSON.parse(fidoString);
    console.log("We have made a dog out of a string! " + fido.name);


    var fido2 = {
        name: "Fido",
        breed: "Mixed",
        weight: 38
    };

    var fido3 = {
        name: {
            first: "alex",
            second: "doggy"
        },
        breed: "Mixed",
        weight : 30
    };
    var fidoString = JSON.stringify(fido2);
    console.log("We made a string from a dog! " + fidoString);

    var x = fido3.name
    document.getElementById("lista").innerHTML = x;
    </script>
</body>
</html>

Alternatively wrap the code in a immediately-invoked function, i.e:

(function () {
  // Your code goes here
})()

score -1 · Answer 3 · answered Sep 26 '17 at 23:43

Put the script at the end of the html.

     <!doctype html>
    <html>
    <head>
      <meta charset="utf-8">

    </head>
    <body>
        <div id="lista"></div>
    </body>
<title> JSON </title>
      <script>

    var fidoString = '{ "name": "Fido", "breed": "Mixed", "weight": 38 }';
    var fido = JSON.parse(fidoString);
    console.log("We have made a dog out of a string! " + fido.name);


    var fido2 = {
        name: "Fido",
        breed: "Mixed",
        weight: 38
    };

    var fido3 = {
        name: {
            first: "alex",
            second: "doggy"
        },
        breed: "Mixed",
        weight : 30
    };
    var fidoString = JSON.stringify(fido2);
    console.log("We made a string from a dog! " + fidoString);

    var x = fido3.name
    document.getElementById("lista").innerHTML = x;



      </script>
    </html>

JSON Uncaught TypeError: Cannot set property 'innerHTML' of null

3 Answers3