innerHTMLで画面更新後、初期画面に戻ってしまう

2023/07/27 00:25

このQ&Aのポイント

innerHTMLを使用して表のセルの表示を<INPUT>フォームに変更する関数を作成しましたが、画面が再描画されて初期状態に戻ってしまいます。
関数の最後にalertを追加すると、関数を抜けたあとにalertが実行されるため、HTMLが実行されているように見えます。
METAタグを使用して画面の再描画を停止する方法が見つかりませんでした。他の方法を試すか、フレームを使用するという選択肢もあります。

ベストアンサー

innerHTMLで画面更新後、初期画面に戻ってしまう。

2002/09/06 13:49

javascript初心者です。　１つのHTMLファイル内で、TABLE内のあるセルに対して、ボタンクリック時に単なるセルの値を<INPUT>タイプに変更する関数をinnerHTMLを使用して作成しました。　ところが実行すると一時的には更新され、表の中に<INPUT>フォームが表示されるのですが、関数を抜けると画面が再描画されて、初期表示状態に戻ってしまいます。　おかしな事は、その関数のすぐ下は</SCRIPT>でscriptの記述は終わりなのですが、関数の最後の締めくくり文字"}"と"</SCRIPT>"間にalertを記述すると、関数を抜けたあと、このalertが実行されます。そのまま下に流れてHTMLが実行されているようにも見えます。　環境はIE6.0(W2K)ですが、IE5.5(NT4.0&W2K)でも現象は一緒でした。　frameを使用して3ファイル（フレームファイルと上下のHTML）に分割して自分以外のhtmlをinnerHTMLで更新したことはあるのですが、この方法しかないでしょうか。　画面再描画を停止するMETAタグとか見当たらないようですが、ご存知でしたら教えて下さい。よろしくお願いします。

keichapapa
お礼率84% (11/13)

JavaScript
回答数2
ありがとう数1

みんなの回答 （2）
専門家の回答

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

ベストアンサー

Mizyu
ベストアンサー率41% (245/593)

2002/09/06 17:32 回答No.2

ソースありがとうございました。修正方法は onclick="fDayEdit()" を onclick="return fDayEdit()" に変更そして fDayEdit関数の中身の break;　をすべて return false; に変更してください。これでできました。

質問者

お礼 2002/09/06 21:41

できました！！”return”が必要だったのですネ。丸１日悩んでいたのが、嘘のようで、ここに尋ねにきてよかったです。ソースまで見ていただき、本当にありがとうございました。インターネットや周りの知り合いに聞いても的確な回答が得られなかったので本当に助かりました。まだまだjavascript初心モノですが、また是非よろしくお願いします。

その他の回答 (1)

Mizyu
ベストアンサー率41% (245/593)

2002/09/06 14:26 回答No.1

ソースがないとピンときません。そのソースを記載してもらえないでしょうか？あとできれば、Webサーバーは何を使っているかも教えていただけたらありがたいです。

質問者

補足 2002/09/06 16:28

Mizyuさん、早速の返事、ありがとうございます。すぐに回答欲しい、といっておきながら遅れてすみません。綺麗なソースではないと思いますが記載させていただきます。表のＸ２右横のイメージ（×になっているでしょうが）をクリックすると現象が見られると思います。それからＷｅｂサーバは使用してません。デモ用画面のためＷｅｂブラウザのみの環境で動作させてます。どうぞよろしくお願いします。 ==================================================== <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <HTML> <HEAD> <SCRIPT language="javascript">  </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> ====================================================

関連するQ&A

innerHTMLが動作しない。
JavaScriptをHTMLファイルに記述した場合、最初にfunctionスコープ内の動作以外は全て行なわれますよね。例えば、 <script type="text/javascript">  </script> と書いた場合、ページの表示と同時にアラートが出ます。しかし上のalertの部分をdocument.getElementById("test").innerHTML = "test";にすると、これが実行されないのです。もちろん<div id="test"></div>タグはちゃんとbodyタグ内に記述してあります。functionを定義してbody onLoadで呼び出す方法もありますが、できればfunctionをむやみに使いたくないので、先のalertの時のように動作させたいのです。これが動作しない原因は何なのでしょうか？
- ベストアンサー
- JavaScript
innerHTMLを使い、書き換えたい
はじめまして。innerHTMLで文章を書き換えたいと思っています。 ■■■■■■■■■■■■ <div id='testid'>元の文章</div> <SCRIPT Laguage="JavaScript"></SCRIPT> ■■■■■■■■■■■■ とするとうまく<div>内の文章が書き換わるのですが、以下のようにjavascriptの記述を先に持ってくるとうまくいきません。 ■■■■■■■■■■■■ <SCRIPT Laguage="JavaScript"></SCRIPT> <div id='testid'>元の文章</div> ■■■■■■■■■■■■ 検索して調べたところ、「関数化させて id を指定したタグが表示されてから命令を実行させる」必要があるとのことなのですが、書き方がわからずにいる次第です。どなたかご教示いただければ幸いです。
- ベストアンサー
- JavaScript
innerHTMLに追記した場合のjs動作
WSHなどでIEオブジェクトを用いて、 documnet.innerHTML += などでHTMLを動的に生成した場合、 <script>内に記述したものが動作しません。これはどの様にするべきでしょうか？ ※別途HTMLを作成せずに動的なhtml生成での話になります。
- ベストアンサー
- JavaScript
innerHTMLなどの反映タイミング
innerHTMLやinnerTextでの反映タイミングについて教えてください。 JavaScriptでsleep関数の自作テストを行なっている過程で innerHTMLやinnerTextが即時には反映されない現象に直面しました。コードを貼り付けておきます。 ※htmlとしてIE等のブラウザで動かしてもいいですが、 htaとして実行したほうが簡易で軽くていいと思います。このコードでは (1)innerHTML(かinnerText)で「実行中…」を表示 (2)sleep関数を呼ぶ (3)innerHTML(かinnerText)で「終了」を表示という、(少なくとも表示部分に関しては) 極めて単純な処理をしています。しかし(1)が反映されません…。 (1)と(2)の間にalertを書いたりするときちんと(1)が表示されます。よく他言語・フレームワークではflushとかリアルタイム描画等のコマンドやオプションで対処できるので、JavaScript(JScript)でもないものかなぁと思い質問してみることにしました。質問は以下です・この現象はなぜ起こるのか。原因説明・これを回避する方法はあるかないか・あるのならその方法明示的なコマンド・オプションでも対症療法でもかまいません。環境はとりあえずはWinXP・hta(レンダリングエンジン：IE8)で動けばOKです。よろしくお願いします。 <html> <body> <div id="status">sleepテスト</div> <input type="button" onclick="testAjaxSleep()" value="testAjaxSleep"><br> <input type="button" onclick="testBusySleep()" value="testBusySleep"><br> <br> <script> var waittime = 3; function testAjaxSleep() { document.getElementById("status").innerHTML = "「AjaxSleep」実行中…"; ajaxSleep(waittime); document.getElementById("status").innerHTML = "AjaxSleep終了"; } function testBusySleep() { document.getElementById("status").innerText = "「BusySleep」実行中…"; document.close(); busySleep(waittime); document.getElementById("status").innerText = "BusySleep終了"; } function ajaxSleep(sec) { var stopTime = (new Date()).getTime() + Math.floor(1000 * sec); var url = "http://www.google.com/?dummy"; var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); while (stopTime > (new Date()).getTime()) { xmlHttp.open('GET', url, false); xmlHttp.send(null); } } function busySleep(sec) { var stopTime = (new Date()).getTime() + Math.floor(1000 * sec); while (stopTime > (new Date()).getTime()) {} } </script> </body> </html>
- ベストアンサー
- JavaScript
JavaScriptのinnerHTMLの挙動について
下で"JavaScript内からJavaScriptを書き出したいのですが"で質問したものですが，ソースコードを簡単にして再質問したいと思います．ソースは以下のようにし，divタグのところにinnerHTMLで文字"test"とJavaScriptでアラートを表示させるものです．表示してみたところ，"test"は表示されるのですが，アラートは出てきません．これはinnerHTMLではHTMLのタグは評価されるが，JavaScriptは評価されない，ということなんでしょうか．JavaScriptのこのような仕様は調べにくいので困っています．回答宜しくお願いします． <html><head><title></title> <SCRIPT type="text/javascript">  </SCRIPT> </head><body> <div id="here" style="position:absolute;width:600px;left:0px;top:0px;"></div> <SCRIPT type="text/javascript">  </SCRIPT></body></html>
- ベストアンサー
- JavaScript
別サイトのinnerHTMLをコピーしたい
こんにちは。別サイトのinnerHTMLをコピーしたいのですが、アクセス拒否されます。何か良い方法はありませんか？そもそもできないのでしょうか？？どなたかご存じの方がいましたらご教授願います。 ☆親フレームHTML ・・・ <frame name="copy" src="copy.html"> <frame name="site" src="http://www.・・・"> ・・・ ☆copy.html ・・・ <head> <script language="JavaScript"> function innerCopy() { window.clipboardData.setData("Text",window.parent.site.document.getElementsByTagName("HTML")[0].innerHTML); } </script> </head> <BUTTON type="button" onclick="innerCopy();">HTMLソースコピー</BUTTON><BR><BR> ・・・
- ベストアンサー
- JavaScript
TEXTAREA内の改行位置をinnerHTMLで反映させたい
例えば、 <HTML> <HEAD> <SCRIPT> function send(){ var message = f1.message.value var str = '<HTML>\n<HEAD>\n</HEAD>\n<BODY>\n' str += ''+ message +'\n' str += '</BODY>\n</HTML>' document.frame1.document.body.document.body.innerHTML = str } </SCRIPT> </HEAD> <BODY> <FORM name="f1"> <TEXTAREA rows="10" cols="40" name="message" onChange="send()"></TEXTAREA> </FORM> <IFRAME name="frame1" id="frame1" width="90%" height="350"></IFRAME> </BODY> </HTML> このような記述をして、テキストエリア内に文字を数行にわたって書き込んでも改行はされません。どのようにすれば改行されるようになりますか？ innerHTMLのところをinnerTEXTとして改行位置に<BR>タグが入るようにするのでもかまわないのですが、、、どなたかお分かりになる方、ご教授願います。
- ベストアンサー
- JavaScript
IEの半角スペースの連続とinnerHTMLについて
IEだと文頭に半角スペースがある場合は詰められ、文中に半角スペースが連続する場合は一つにまとめられてしまいます。ただ、innerHTMLだと正しく取れると思っていましたがやはり詰められて取得されてしまいます。ただしく取得できる方法を模索しております。 hiddenに値を設定などではなく、現在のHTMLからの取得方法をお願い致します。下記のソースで状況を再現できますのでご確認ください（blankの間のスペースは2つ空いています） <html> <head> <script> function testfunc() { str = document.getElementById('test2').innerHTML alert('[' + str + ']'); } function testfunc2() { str = document.getElementById('test').childNodes[0].firstChild.nodeValue; alert('[' + str + ']'); } </script> </head> <body> <div id="test"><div id="test2"> blank blank </div></div> <input type="button" value="CLICK ME1" onclick="testfunc()"><br> <input type="button" value="CLICK ME2" onclick="testfunc2()"> </body> </html>
- ベストアンサー
- JavaScript
innerHTML内では改行は禁止？
基本的なことかもしれませんが、JavaScript初心者なので質問させてください。 innerHTML内で改行を入れると実行されないのでしょうか？たとえば、これ↓はうまく行くのですが、 <script type="text/javascript"> function change1() { document.getElementById('change1').innerHTML='<p>ハケには毛が多い</p><p>ハゲには毛がない</p><input type="button" value="失礼しました m(_ _)m" />' } </script> <div id="change1"> <p>カラスは黒い</p> <p>ガラスは透明</p> <input type="button" value="ここを押すと文章が変わります" onClick="change1();"> </div> こうすると↓うまく行きません。 <script type="text/javascript"> function change2() { document.getElementById('change2').innerHTML=' <p>ハケにはやはり毛が多い</p> <p>ハゲにはやはり毛がない</p> <input type="button" value="再び失礼しました m(_ _)m" />' } </script> <div id="change2"> <p>カラスは黒い</p> <p>ガラスは透明、、、じゃないものもある</p> <input type="button" value="ここを押すと文章が変わります？" onClick="change2();"> </div> 別に困っているわけではないのですが、ソースは見やすく書きたいのでよろしくお願いします。
- ベストアンサー
- JavaScript
HTMLを動的に変更する方法
<div id="foo"></div> の中に、後から読み込んだJavaScriptファイルでHTMLを流し込みたいのですが、それにはどのように記述するのがよいのでしょうか。あまりに古いブラウザに対応する必要はありませんが、ある程度幅広く、ＯＳやブラウザに依存せずに実行させる必要があります。また、実行タイミングはHTMLの描画途中（window.onload発生前）です。確か、innerHTMLを変更する方法やDOMの何とかいう関数を使う方法などがあったように思うのですが、どれがどのブラウザのどのバージョンで実行できるのか分かりません。そういうことが載っているサイトなどありましたら、そちらも教えてください。よろしくお願いします。
- ベストアンサー
- JavaScript