Question

JSON 未捕获的类型错误：无法设置属性“innerHTML”为 null [重复]

2017-09-26

1030

javascript html json

问题是：将您的对象转换为 JSON 字符串 myString，并将其显示在页面的某个位置。这是我的代码：

<!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>

我在 JSON.html:31 处收到错误：JSON.html:31 Uncaught TypeError：无法将属性“innerHTML”设置为 null 。无法修复此错误，需要一些帮助。

Answer 1

您需要将 <script> 标签移至 <body> 标签的底部。目前，脚本在元素 <div id="lista"> 存在之前执行。如下所示：

<!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>

或者将代码包装在立即调用的函数中，即：

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

Answer 2

由于解析器自上而下读取，因此您的 JS 将在主体中的 HTML 之前解析。解析代码时，元素尚未在 DOM 中可用。

要解决此问题，请将脚本标记移至 body 标记结束之前。

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

Answer 3

将脚本放在 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>