Question

问题是：将对象转换为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未捕获的TypeError：无法设置属性＆＃39; innerHTML＆＃39;为null 在JSON.html：31。无法解决此错误并需要一些帮助。

Answer 1

您的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 2

您需要将<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 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>

JSON Uncaught TypeError：无法设置属性＆＃39; innerHTML＆＃39;为null

3 个答案: