Javascriptの要素

によって、キャンバスの作成でエラー私はJavaScriptのみの要素でキャンバスを作成したいしかし、私はエラーが見つかりました：Javascriptの要素

Uncaught TypeError: Cannot read property 'appendChild' of null

私のJavascriptのコードは次のとおりです。

// create the canvas on the page : 
var myPageCanvas = document.createElement("canvas"); 

    // Assigne Id to thin canvas :   
myPageCanvas.id = 'c'; 

// custumize canvas :  
myPageCanvas.height = 300; 
myPageCanvas.width = 500; 
myPageCanvas.style.display = "block"; 
myPageCanvas.style.margin = "50px auto"; 

// Add the canvas on the page : 
document.body.appendChild(myPageCanvas);

出典

2016-10-22 Abdallah.BeraYda

は、あなたがコピーしたコードを貼り付けDID作成、またはあなたはそれを書き直しました？。あなたのコードには何の問題もありません。 – youssouf

Google Chromeのコンソールを使用しているとき、ヌルの 'appendChild'プロパティを読み取ることができません。私のコードは疑問です=） –

あなたのページには要素が含まれているように見えるか、タグを閉じなかったと思います。 – youssouf

<!DOCTYPE html> 
<html> 
<body> 
<p>Click the button to append canvas.</p> 

<button onclick="myFunction()">Append</button> 

<script> 
function myFunction() { 
    var myPageCanvas = document.createElement("canvas"); 

    // Assigne Id to thin canvas :   
myPageCanvas.id = 'c'; 

// custumize canvas :  
myPageCanvas.height = 300; 
myPageCanvas.width = 500; 
myPageCanvas.style.backgroundColor = "lightgrey"; 
myPageCanvas.style.display = "block"; 
myPageCanvas.style.margin = "50px auto"; 

// Add the canvas on the page : 
document.body.appendChild(myPageCanvas); 
} 
</script> 

</body> 
</html>

完全な作業コード

出典

2016-10-22 13:20:36

ありがとうございました===>解決済み –

大歓迎:)投稿したコードに問題はありませんでした。文法や投稿していないものにはいくつか問題があったと思います。だから私は完全なコードを書いた。 –

問題は、ウィンドウがロードされる前にJSコードが実行されるため、ボタンのプッシュでコードを実行するだけで間接的に問題を解決できるためです。 Blindman67の答えはより直接的であり、したがってより一般的に使用可能です。 – markE

document.bodyがbeeを実行する前にスクリプトを実行している可能性がありますnが作成されました。

のどちらかがbodyタグにスクリプトを置くか、ページがロードされたときにコードが実行されるようdocument.addEventListener("load",function(){ your script })を使用してbody要素は

出典

2016-10-22 13:24:12 Blindman67

Javascriptの要素

答えて

関連する問題