ブラウザに文字が表示されない理由と解決方法

前へ 次へ
このQ&Aのポイント
  • ブラウザに乱数が表示される条件として、onLoadイベントでrand()関数を呼び出す必要があります。
  • onLoadイベントを使用せずに送信ボタンを押下すると、ブラウザに乱数が表示されないことがあります。
  • この現象の原因は、レイアウトが一度確定した後に後から文字を表示することができないためです。
回答を見る
  • ベストアンサー

ブラウザに文字が表示されません。

はじめまして。 質問があります。 以下のコードを見てください。 ---------------------------------------------------------------- <html> <head> <script type="text/javascript"> <!-- function rand() { window.document.getElementById("i").innerHTML = Math.random(); } //--> </script> </head> <!-- <body onLoad="rand()"> --> <body> <form name="myform"> <input type="submit" name="submit" onClick="rand()"><br> </form> <div id="i"></div> </body> </html> ---------------------------------------------------------------- あらかじめonLoadイベントでrand()関数を呼び出しておくと、後から 送信ボタンを押下すると、 ブラウザに乱数が表示されるのですが、onLoadイベントを使用せずに 送信ボタンを押下するとブラウザに 乱数が表示されません。これは一体なぜなのでしょうか？ 例えば、レイアウトが一度確定したら、そのレイアウトに後から 文字などを表示させることができないなどというような原因 なのでしょうか？よくわかりません。ご教授お願いします。

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

  • ベストアンサー
  • STICKY2006
  • ベストアンサー率29% (1536/5269)
回答No.1

こんにちは。 んー。。。質問の意図がイマイチ見えてきませんがー。。。 表示されますよ？ 一瞬だけ。 このソース使っても、エラーは出なかったので、考えている動作と違うプログラムを組んだのでしょう。 >>あらかじめonLoadイベントでrand()関数を呼び出しておくと、後から送信ボタンを押下するとブラウザに乱数が表示されるのですが 違います。 流れとしては。。。 ・ページを表示する。（このときにonLoadを一度通るので、乱数がブラウザ上に、表示されます。 ↓ ・送信ボタンを押す。（この瞬間に、onClickが動き、別の乱数がブラウザ上に表示されます。 ↓ ・ページが更新、再表示される。（「submit」ボタンなので、ページ情報が送信、更新され、表示されるので、再びonLoadを通ります。ので、再び表示されます。 本来、１度の呼び出しでいいと思うのですが、２回呼び出しているため、予期せぬ表示がされていると思います。 で、単純に >>onLoadイベントを使用せずに送信ボタンを押下すると 一瞬だけ表示されますが、「submit」を使用しているため、ページが更新され、何もなかったようになります。 ・ページの表示。（この時、rand()は呼び出されないため、何も表示されていない。 ↓ ・ボタンを押す。（この時、onClickからrand()が呼び出されるため、一瞬だけ表示され、その後「submit（送信」される。 ↓ ・ページが再表示される。（rand()を通らないため、表示されない。 の繰り返しですね。 とりあえず、上記のソースだけのページを作って、onLoad=rand()の状態と、そうでない状態をよーく見比べてみると分かると思いますよ。 一瞬だけ表示される～っていうのが。 個人的には、あまり「type ="submit"」は、使い勝手がよいものでは無いと思っています－ｗ－。

tyorotyoro123
質問者

お礼

STICKY2006様へ ご回答ありがとうございました。 わかりやすい解説でした。 submitボタンがクセ者だったんですね。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 別なページにジャンプさせたい

    ボタンをクリックすると指定のページに飛ぶようにしたいのですが、 <html> <head> <script language="JavaScript"> function jump(){ location.href="index.html"; } </script> </head> <body> <form onSubmit="jump()"> <input type="submit"> </form> </body> </html> でも <html> <head> <script language="JavaScript"> function jump(){ location.href="index.html"; } </script> </head> <body> <form> <input type="submit" onClick="jump()"> </form> </body> </html> でも動きません。（そのページを表示したままです） <body onload="jump()">にしたときは正常にジャンプできるので、クリックのイベントが拾えていないと思うのですが、どのように記述すればいいのでしょうか。 よろしくお願いいたします。

  • 一致する文字を見つけ、それのみ表示させる方法

    javascriptを使って<body>内の<div>に含まれる文字と一致するものを絞り込み、残りは非表示にする方法を教えてください。 ドロップダウンで文字を選びOKボタンを押すと あ　の場合は<div>内の「あ」が１つなので１つだけ表示され い　は２つあるので２つ表示され う　は３つ、というように idやclassをつけて判断させるのではなく、中身の文字のみを判断できるようにしたいです。 <html> <head> <title></title> <script type="text/javascript"> </script> </head> <body> <form> <select> <option value="">あ</option> <option value="">い</option> <option value="">う</option> </select> <input type="button" value="OK" onclick=""> </form> <div>あ</div> <div>い</div> <div>う</div> <div>い</div> <div>う</div> <div>う</div> </body> </html>

  • ブラウザの表示について

    よろしくお願いします。 IEでは問題なく表示されて、Opera、Firefox、Safariで表示されないのはHTMLの記述が問題なのでしょうか？ それとも外部スクリプトのほうの問題なのでしょうか？？ 下記はHTMLのソースの一部です。 -------------------------------------------------------------- <head> <title>catalog test</title> <script type="text/javascript" src="test6.js"></script> <style type="text/css"> table{ border-collapse:separate; } table,tbody,tr,th,td{ border-style:solid; } </style> </head> <body onload="YOMIKOMI(3);"> <p> <object id="TEST" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL" value="list2.csv" /> <param name="UseHeader" value="true" /> <param name="TextQualifier" value="'"> <param name="FieldDelim" value=","> </object> </p> <div id="OUTPUT"> </div>

  • テキストボックスにスクロールする文字列を表示する。

    テキストボックスにスクロールする文字列を表示する方法を知りました。^^ これはできたのですが、同じページで、「★メッセージ1」の他に 「別の表示」をさせたいのですがどうしたらいいんでしょうか? 例えば、「★メッセージ2」。など　 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- msg="★メッセージ1　　　　　"; function scroll(){ msg=msg.substring(1,msg.length)+msg.substring(0,1); document.myform.mytext.value=msg; setTimeout("scroll()",300); } //--> </SCRIPT> </HEAD> <BODY onLoad="scroll()"> <CENTER> <FORM name="myform"> <INPUT name="mytext" size="20"> </FORM> </CENTER> </BODY> </HTML>

  • そのオブジェクトが存在しているかどうか

    p.htmを呼び出すと document.form0.sabmit が存在しなくてエラーになります もしＰＨＰでhtml生成していてそのhtml内で存在しないオブジェクトを使って何かをさせようとするとエラーになります document.form0.sabmitが存在するかどうかを判断して 存在しているれば document.form0.sabmit.focus() をするような記述はどうするのでしょうか? このサイトのPHPも同じようなエラーを発生しているようです p.htm: --------------------------------- <html> <head> <title>forward</title> <script type="text/javascript"> <!-- function FormFocus() { // document.form0.submit.focus(); document.form0.sabmit.focus(); } // --> </script> </head> <body onload="FormFocus()"> <form name="form0" method="post" action="q.htm"> <input type="submit" name="submit" value="push"/> </form> </html> --------------------------------- q.htm: --------------------------------- <html> <head> <title>backward</title> </head> <body> <form name="form0" method="post" action="p.htm"> <input type="submit" name="submit" value="push"/> </form> </html> ---------------------------------

  • ブラウザ依存？　html JavaScript textboxの値の渡し方

    <html> <head> <script type="text/javascript"> function print(arg){ document.getElementById("out").innerHTML = "<br/>" + arg; } </script> </head> <body> <input type="textbox" name="text1"/><br/> <input type="button" value="print" onclick="print(text1.value)"/> <div id="out"></div> </body> </html> 上記は、textboxに入力した文字列を[print]ボタンを押下すると表示するhtmlです。IE6.0では期待通りに動作するのですが、Firefox/2.0では動作しません。 ブラウザに依存しない様にはどこを直せばよいですか？

  • Javascript IEで「識別子がありません」とエラーが出てしまいます。

    ページの読み込みが完了した段階でsubmit()して、 formの内容をactionで指定した先にPOSTしたいのですが、IE6で エラー:識別子がありません コード:0 と出てしまい動作しません。 以下がそのソースです。 --------------- <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body onload="document.export.submit()"> <form action="list.php" method="POST" name="export"> <input type="hidden" name="data[0][text]" value="テキスト"> <input type="hidden" name="mode[export]" value="" /> <input type="submit" name="submitButton" value="エクスポート"/> </form> </body> </html> --------------- なお、Firefox2.0では正常に動作しています。 <body onload="document.form['export'].submit()"> などと、いろいろと弄り回してはみたのですが、 どつぼにハマるばかりだったので、解る方ご教授下さいませ…。

  • 違う文字コードのページへＦＯＲＭデータを送る時

    いつもお世話になっております。 EUC-JP のページからx-euc-jpのページへFORMを使いデータを渡しているのですが、どうも受け取り側で渡したデータが文字化けを起こしているようなのです。 原因が分かる方がいたら、ご教授下さい。 <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" /> <script type="text/javascript"> <!-- function sent2() { document.INPUT.submit(); } // --> </script> </HEAD> <BODY onload="sent2()"> <form name="INPUT" METHOD="POST" action="http://okwave.jp" ENCTYPE="text/plain"> <input type="hidden" name="arr1" value="555006303003"> </form> </BODY> </HTML>

  • フォームに表示される文字をセンタリングさせたい。

    Javascriptの初心者です。宜しくお願いします。 テキストエリアが2つあったとします。 1のテキストエリアにある値を入力してボタンを押すと、 2のテキストエリアに1で入力した値をそのまま表示させ、 尚且つ表示された値をフォーム内でセンタリングさせたいのですが どうすればよいのかわかりません・・・。 ご存知の方がいらっしゃいましたら教えて下さい。 どうぞ宜しくお願い致します。 <html> <head> <script language="JavaScript"> <!-- function my1() { a=document.form1.text1.value; document.form1.text2.value=a; } //--> </script> </head> <body> <form name="form1"> <input type="texterea" name="text1"> <input type="texterea" name="text2"> <input type="button" value="CLICK!" onClick="my1()"> </form> </body> </html>

  • オブジェクトが存在しない

    というエラーが次のｈｔｍｌファイルをブラウザで表示させようとするとでます if(document.form0.title!=null) で判断しているだけでだめみたいです そしたらdocument.form0.titleが存在するかどうかをエラーなしで判断させる方法はあるのでしょうか? <HTML> <HEAD> <script type='text/javascript'> <!-- function FormFocus() { 　if(document.form0.title!=null)document.form0.title.focus(); } // --> </script> </HEAD> <body onload='javascript:FormFocus()'> <form name='form0'></form> </BODY> </HTML>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する