JSON未捕获TypeError：无法设置为空的属性'innerHTML'

问题是：将您的对象转换为JSON字符串myString并将其显示在页面的某处。这里是我的代码：JSON未捕获TypeError：无法设置为空的属性'innerHTML'

<!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不能设置为null 的特性 '的innerHTML'：31。无法修复此错误，需要一些帮助。

来源

2017-09-26 user7697691

您需要的<script> -tag移动到<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 
})()

来源

2017-09-26 23:43:24 Svenskunganka

由于解析器自上而下读取它，因此您的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>

来源

2017-09-26 23:42:30

-1

把脚本的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>

来源

2017-09-26 23:43:10

JSON未捕获TypeError：无法设置为空的属性'innerHTML'

回答

相关问题