質問内容
質問を評価する
(0ポイント)
|
外部ファイルとしてJavaScriptをインポートして使っています。
ページを開くとまずタイトルのようなエラーが出ます。
デバッグしてみるとグローバル変数の初期化をしようとしているところでエラーとなっているようでした。
そこで、宣言と初期化を一緒に行わず、とある関数の中で変数に値を入れることにしました。
それでも同じエラーが出ました。
そもそもグローバル変数をその場で初期化することは問題ないと思うのですが、何が原因なのでしょうか？
また、HTMLでdivタグにidを割り当て、その中にJavaScriptでinnerHTMLを使ってid付きのcanvasを埋め込もうとしています。
埋め込みと同じ関数で埋め込んだ後に2Dコンテキストを得ようとすると、以下のようなエラーが出ました。
エラー: オブジェクトは 'getContext' プロパティまたはメソッドをサポートしていません。
innerHTMLによる変更が終わる前にgetContextしてしまっているのでしょうか？
現在作っているhtmlファイルとjsファイルを提示します。
bound_ball_editor_for_Web.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bound ball editor for Web</title>
<script type="text/javascript" src="bound_ball_editor_for_Web.js"></script>
</head>
<body onload=setting()>
<table>
<tr><td>
<div id="canvas"></div>
</td><td>
<div id="setting"></div>
</td></tr>
</table>
</body>
</html>
bound_ball_editor_for_Web.js
/**
*
*/
var pc=true;
var window;
function setting(){
if ((navigator.userAgent.indexOf('iPhone') > 0 &&
navigator.userAgent.indexOf('iPad') == -1) ||
navigator.userAgent.indexOf('iPod') > 0 ||
navigator.userAgent.indexOf('Android') > 0) {
pc=false;
}
if(pc==true){
document.getElementById("canvas").innerHTML="<canvas id=\"window\" width=\"140\" height=\"100\"></canvas>";
document.getElementById("setting").innerHTML="";
}
else{
document.getElementById("canvas").innerHTML="<canvas id=\"window\" width=\"140\" height=\"100\"></canvas>";
document.getElementById("setting").innerHTML="";
}
window=document.getElementById("window");
if(!window){
return;
}
window = window.getContext('2d');
if(!window){
return;
}
window.strokeStyle="#000000";
window.strokeRect(0, 0, window.width, window.height);
}
PCとスマホとでcanvasのサイズやレイアウトを変更したりする予定ですが、まだその辺は特にやっていないので現在はまだ同じ設定になっています。
そういえばwindow変数を作ったりする前はエラーが出なかったとwindow変数の宣言やwindow変数を使っている部分を消して試してみるとやはりエラーは出ませんでした。
windowって予約語だったかな？とwinに変更(これこそ予約語？)して試してみても結果は同じでした。
なにが原因なのでしょうか？
|
