2017-09-26 10 views
1

の「innerHTMLプロパティは、」質問です:あなたのオブジェクトは、JSON文字列のmyStringに変換し、ページ上のどこかに表示します。 JSON.html:31キャッチされない例外TypeError:私はエラーを得たJSONキャッチされない例外TypeError:プロパティを設定することはできませんヌル

<!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でヌル の 'innerHTMLプロパティ' プロパティを設定できません:31。このエラーを解決できず、何か助けが必要です。パーサが、それはトップダウン読み込むので、

答えて

0

あなたは<body> -tagの底に<script> - タグを移動する必要があります。現時点では、要素<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 
})() 
0

あなたの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>

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