こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

IEでfor()が機能しないのはなぜ?解決方法は?

下記プログラムでは、
ボタンを押すとカウントダウンが開始され、
0になったときに、table内の100x100の画像4枚を
一気に1枚の244x244の画像と切り替えるというものです。

Firefoxではカウントダウンが実行された後に、
画像が切り替わるのですが、
IEではカウントダウンが実行されずに
画像が切り替わってしまいます。
特にエラーメッセージは出ません。

IEでもちゃんとカウントダウンをさせた後に
画像の切換えをしたいのですが、どうすればいいのでしょうか?



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">
<!--
#xxx{
position: absolute;
top: 110px;
left: 50px;
}
table{
border-spacing:0;
border-collapse:collapse;
}
td{
border:1px solid #000;
padding:10px;
width:100px;
height:100px;
}
//-->
</style>

<script language="JavaScript">
<!--

function start(){
document.mF.ttt.value = "まだ切換えていません";
}

function kirikae(){
for(var i=5; 0<=i; i--){
alert(i);  //カウントダウン
if(i==0){  //カウントダウンが0になったら
xxx.innerHTML = '<img src="r.gif" width="244" height="244">'; //画像切換え
document.mF.ttt.value = "切換えました";
}
}
}

//-->
</script>
</head>
<body onload="start()">
<form name="mF">
<div id="xxx">
<table>
<tr>
<td><img src="1.jpg" width="100" height="100"></td>
<td><img src="2.jpg" width="100" height="100"></td>
</tr>
<tr>
<td><img src="3.jpg" width="100" height="100"></td>
<td><img src="4.jpg" width="100" height="100"></td>
</tr>
</table>
</div>
<input type="button" value="全画像の切換え" onclick="kirikae()">
<input type="text" name="ttt">
</form>
</body>
</html>

投稿日時 - 2011-05-06 17:55:05

QNo.6718350

すぐに回答ほしいです

質問者が選んだベストアンサー

え~と、
<script language="JavaScript">
は、やめて
<script type="text/javascript">
にしましょう。


document.mF.ttt.value
は、
document.forms['mF'].elements['ttt'].value
の、しょうりゃくけいなので、いつかとらぶるにならないようにね


function kirikae () {
 for (var i=5; 0<=i; i--) {
  alert (i);
  if (i == 0) {
   xxx.innerHTML = '<img src="r.gif" width="244" height="244">';
   document.mF.ttt.value = "切換えました";
  }
 }
}

うえのやつは、まいかい i==0 をはんべつするので、むだです。

function kirikae () {
 for (var i = 5; i; )
  alert (i--);

 document.getElementById("xxx").innerHTML = '<img src="r.gif" width="244" height="244" alt="~">';
 document.forms['mF'].elements['ttt'].value = "切換えました";
}

form ようそには、action ぞくせいがひっすです
img ようそには、alt ぞくせいがひっすです
それから、よくやらかすひひとがおおいのですが、
img ようそとか、input ようそは、いんらいんようそなので
ぶろっくようそでかこむようにしましょう
HTML5 なら、あまりきにしなくてもよいです
それから document.images[] は、後方ごかんのためによういされているものなので
しようするべきではありません。

innerHTML でかきかえるより、
.style.display = 'hidden' にしていおいて、'block'にきりかえては?

投稿日時 - 2011-05-06 20:51:05

お礼

ありがとうございました。
とても参考になりました。

投稿日時 - 2011-05-07 12:40:15

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

正解は出ているようですが、
まとめると、全体像は下記になりますね。
-----------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">
<!--
#xxx{
position: absolute;
top: 110px;
left: 50px;
}
table{
border-spacing:0;
border-collapse:collapse;
}
td{
border:1px solid #000;
padding:10px;
width:100px;
height:100px;
}
//-->
</style>

<script language="JavaScript">
<!--

function start(){
document.mF.ttt.value = "まだ切換えていません";
}

function kirikae()
{
for(var i=5; 0<=i; i--)
{
alert(i);  //カウントダウン
}

document.getElementById('xxx').innerHTML = '<img src="r.gif" width="244" height="244">'; //画像切換え
document.mF.ttt.value = "切換えました";

}

//-->
</script>
</head>
<body onload="start()">
<form name="mF">
<div id="xxx">
<table>
<tr>
<td><img src="1.jpg" width="100" height="100"></td>
<td><img src="2.jpg" width="100" height="100"></td>
</tr>
<tr>
<td><img src="3.jpg" width="100" height="100"></td>
<td><img src="4.jpg" width="100" height="100"></td>
</tr>
</table>
</div>
<input type="button" value="全画像の切換え" onclick="kirikae()">
<input type="text" name="ttt">
</form>
</body>
</html>
-----------------------------------------

投稿日時 - 2011-05-07 00:49:38

お礼

ありがとうございました。

投稿日時 - 2011-05-07 12:39:40

ANo.1

上記ソースを エディタにコピペし
IE8/7/6/5で検証 したところ、ご希望の動作はされているようです。

がしかし、怪しいかなあと思う個所は
xxx.innerHTML かもしれません。

document.getElementById("xxx").innerHTML
に置き換えてみてください。

投稿日時 - 2011-05-06 20:17:47

お礼

この方法で試したらちゃんとできました。
ありがとうございました。

投稿日時 - 2011-05-07 12:40:56

あなたにオススメの質問