- ベストアンサー
innerHTMLで画面更新後、初期画面に戻ってしまう
- innerHTMLを使用して表のセルの表示を<INPUT>フォームに変更する関数を作成しましたが、画面が再描画されて初期状態に戻ってしまいます。
- 関数の最後にalertを追加すると、関数を抜けたあとにalertが実行されるため、HTMLが実行されているように見えます。
- METAタグを使用して画面の再描画を停止する方法が見つかりませんでした。他の方法を試すか、フレームを使用するという選択肢もあります。
- keichapapa
- お礼率84% (11/13)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ソースありがとうございました。 修正方法は onclick="fDayEdit()" を onclick="return fDayEdit()" に変更 そして fDayEdit関数の中身の break; をすべて return false; に変更してください。 これでできました。
その他の回答 (1)
- Mizyu
- ベストアンサー率41% (245/593)
ソースがないとピンときません。 そのソースを記載してもらえないでしょうか？ あとできれば、Webサーバーは何を使っているかも教えていただけたらありがたいです。
補足
Mizyuさん、早速の返事、ありがとうございます。 すぐに回答欲しい、といっておきながら遅れてすみません。 綺麗なソースではないと思いますが記載させていただきます。表のＸ２右横のイメージ（×になっているでしょうが）をクリックすると現象が見られると思います。 それからＷｅｂサーバは使用してません。デモ用画面のためＷｅｂブラウザのみの環境で動作させてます。 どうぞよろしくお願いします。 ==================================================== <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <HTML> <HEAD> <SCRIPT language="javascript"> <!-- //変数 var komoku; //ウィンドウ閉じる function seikaClose(){ window.close(); } //編集 function fDayEdit(){ for( i = 0; i < document.form1.komoku.length; i++ ){ if( document.form1.komoku[i].checked ){ komoku=parseInt( document.form1.komoku[i].value ); break; } } alert("form1.komoku="+komoku); switch(komoku){ case 0: alert("case0"); document.all.D10.innerHTML = "<INPUT TYPE='text' NAME='date10' VALUE='2002/05/01' MAXLENGTH='10'>"; alert("case0"); break; case 1: alert("case1"); document.all.D20.innerHTML = "<INPUT TYPE='text' NAME='date20' VALUE='2002/05/20' MAXLENGTH='10'>"; document.all.D21.innerHTML = "<INPUT TYPE='text' NAME='date21' VALUE='2002/05/25' MAXLENGTH='10'>"; document.all.D22.innerHTML = "<INPUT TYPE='text' NAME='date22' VALUE='2002/05/31' MAXLENGTH='10'>"; alert("case1"); break; case 2: alert("case2"); document.all.D30.innerHTML = "<INPUT TYPE='text' NAME='date30' VALUE='2002/04/30' MAXLENGTH='10'>"; break; alert("case2 end"); } } //--> </SCRIPT> </HEAD> <BODY> <NOBR> <BR><BR> </NOBR> <INPUT TYPE="image" onClick="seikaClose()" VALUE="<IMG border="0" src="../image/btm_close.gif" width="80" height="24"> <FORM NAME="form1"> <TABLE BORDER="1"> <TR CLASS="hyodai"> <TD NOWRAP ALIGN="center" COLSPAN="2"> </TD> <TD NOWRAP ALIGN="center" WIDTH="100"> <TABLE BORDER="0"> <TR> <TD NOWRAP ALIGN="center" WIDTH="100">Ｘ１</TD> </TR> </TABLE> </TD> <TD NOWRAP ALIGN="center" WIDTH="100"> <TABLE BORDER="0"> <TR> <TD NOWRAP ALIGN="center" WIDTH="100">Ｘ２</TD> <TD NOWRAP ALIGN="center"><INPUT TYPE="image" src="../image/btm_edit20s.gif" WIDTH="40" HEIGHT="20" BORDER="0" onclick="fDayEdit()"></TD> </TR> </TABLE> </TD> </TR> <TR> <TD ALIGN="center" VALIGN="middle" CLASS="hyodai" WIDTH="10"> <INPUT TYPE="radio" NAME="komoku" VALUE="0"></INPUT> </TD> <TD CLASS="hyodai" VALIGN="top" WIDTH="100"> Ｙ１ </TD> <TD CLASS="meisai"> ＸＸＸＸＸ </TD> <TD CLASS="meisai" ALIGN="center" ID="D10"> <FONT COLOR="red">2003/05/01</FONT> </TD> </TR> <TR> <TD ROWSPAN="3" ALIGN="center" VALIGN="middle" CLASS="hyodai" WIDTH="10"> <INPUT TYPE="radio" NAME="komoku" VALUE="1"></INPUT> </TD> <TD CLASS="hyodai" ROWSPAN="3" VALIGN="top" WIDTH="100"> Ｙ２ </TD> <TD CLASS="meisai"> ＸＸＸＸＸ </TD> <TD CLASS="meisai" ALIGN="center" ID="D20"> <FONT COLOR="red">2003/05/20</FONT> </TD> </TR> <TR> <TD CLASS="meisai"> ＸＸＸＸＸ </TD> <TD CLASS="meisai" ALIGN="center" ID="D21"> <FONT COLOR="red">2003/05/25</FONT> </TD> </TR> <TR> <TD CLASS="meisai"> ＸＸＸＸＸ </TD> <TD CLASS="meisai" ALIGN="center" ID="D22"> <FONT COLOR="red">2003/05/31</FONT> </TD> </TR> <TR> <TD CLASS="hyodai" WIDTH="10" ALIGN="center" VALIGN="middle"> <INPUT TYPE="radio" NAME="komoku" VALUE="2" CLASS="hyodai"></INPUT> </TD> <TD CLASS="hyodai" ROWSPAN="2"> Ｙ３ </TD> <TD CLASS="meisai"> ＸＸＸＸＸ </TD> <TD CLASS="meisai" ALIGN="center" ID="D30"> <FONT COLOR="red">2003/04/30</FONT> </TD> </TR> </TABLE> </FORM> </BODY> </HTML> ====================================================
お礼
できました！！”return”が必要だったのですネ。 丸１日悩んでいたのが、嘘のようで、ここに尋ねにきてよかったです。 ソースまで見ていただき、本当にありがとうございました。 インターネットや周りの知り合いに聞いても的確な回答が得られなかったので 本当に助かりました。 まだまだjavascript初心モノですが、また是非よろしくお願いします。