※ ChatGPTを利用し、要約された質問です（原文：Ｊavascriptの質問です。）
Ｊavascriptの初心者のコードの不具合の訂正をお願いします
このQ&Aのポイント
昨日からjavascriptを始めた初心者なのですが、以下のコードの不具合の訂正をお願いしたいのです。自分なりにあれこれやっては見ましたが、結論が見出せません。
問題点：(1)windowをリサイズたときに、動かない点 (2)ＤＯＣＴＹＰＥ宣言すると、まったく機能しない。（ＤＯＣＴＹＰＥ宣言とJAVASCRIPTの対応が理解できていないので。。とりあえず、ＤＯＣＴＹＰＥ宣言無しでも機能すればいいかな？と思っております。ＩＥ８とfirefox3での表示を目指しています。）
要約文も余程のことがない限り3点必要かと思います。一点目は質問内容、二点目は問題点に関して、三点目は目指している表示環境、としました。
Ｊavascriptの質問です。
昨日からjavascriptを始めた初心者なのですが、すみませんが、以下のコードの不具合の訂正をお願いしたいのです。自分なりにあれこれやっては見ましたが、結論が見出せません。
昨日は、id="BOX" の部分を、windowをリサイズしたときに、縦横常に中央に表示させるといったものです。
問題点：
(1)windowをリサイズたときに、動かない点
(2)ＤＯＣＴＹＰＥ宣言すると、まったく機能しない。（ＤＯＣＴＹＯＥ宣言とJAVASCRIPTの対応が理解できていないので。。とりあえず、ＤＯＣＴＹＰＥ宣言無しでも機能すればいいかな？と思っております。ＩＥ８とfirefox3での表示を目指しています。）
恐れ入りますがよろしくお願いいたします。
■ＨＴＭＬ
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<link href="css/test1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function changeStyle(y,x)
{
/*変数トレース*/
document.write("関数CALL\n");
document.write(y+"/");
document.write(x);
/*CSSの書き換え（ＣＳＳ）を書き換えると位置をへんこうできるものと思っています。*/
document.getElementById("box").style.marginTop = y;
document.getElementById("box").style.marginLeft = x;
}
// -->
</script>
<script type="text/javascript">
<!--
function relocate()
{
window.focus();
/*firefoxのwindowサイズとboxの大きさによりマージンを計算*/
if( 0 != window.innerHeight && window.innerHeight > 960){
y=((window.innerHeight - 960)/2);
}else{y=0;}
/*ＩＥのwindowサイズとboxの大きさによりマージンを計算*/
if( 0 != window.innerWidth && window.innerHeight >1100){
x=((window.innerWidth - 1100)/2);
}else{x=0;}
/**/
if( 0 != document.body.clientHeight && document.body.clientHeight > 960){
y=((document.body.clientHeight - 960)/2);
}else{y=0;}
if(0 != document.body.clientWidth && document.body.clientWidth > 1100){
x=((document.body.clientWidth - 1100)/2);
}else{x=0;}
/*CSSの変更*/
changeStyle(y,x);
}
//-->
</script>
</head>
<body onResize="relocate()">
<!-- イベントハンドラセット（リサイズ時にＣＳＳ変更）こちらが問題のようです。 -->
<div id="box">123456</div>
<!-- 目的のボックス-->
<script type="text/javascript">
<!--
/*オンロード時に１度ＣＳＳを変更する。もちらは動作します。*/
relocate();
// -->
</script>
</body>
</html>
■ＣＳＳ
@charset "utf-8";
/* CSS Document */
*{
margin: 0px;
padding: 0px;
}
#box {
background-color: #FF3300;
height: 960px;
width: 1100px;
border: 100px none #999999;
margin-top:0px;
margin-left:0px;
}
よろしくお願いします。
お礼
複雑な質問に回答ありがとうございます。 document.writeをすると元々のHTMLの要素は消えてしまいますので、間違いなくエラー >>この部分知らずにトレースしてデバッグしてました。 FirefoxのDOM-TOOLで見たときに、消えていましたので、回答のとおりだと理解できました。 アドバイスありがとうございます。トレースしようと表示させた部分の document.writeを削除すると、動きが変な状態は解除されました。 おかげさまで思ったとおり動くようです。 感謝します。！