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'

回答

相關問題