JavaScriptのブラウザ上での動作に関する問題

2023/10/16 14:34

このQ&Aのポイント

JavaScriptを使用して作成したボタンがブラウザ上で正しく表示されない問題が発生しました。
参考にしたブログで紹介されているコードを使用したところ、ボタンが表示されずに代わりに文字だけが表示されました。
MacでFireFoxを使用しているが、他のブラウザでも同様の問題が発生しました。

ベストアンサー

javascriptがブラウザ上でうまく動きません（すいません。初学者です。

2009/07/15 16:03

長いこと探したのですが、見つからなかったためご質問させて頂きます。お恥ずかしいのですが、教えて頂きますと非常に助かります。。。（http://blog.livedoor.jp/dankogai/archives/50940292.htmlを参考にしました） <input type="submit" value="Hello, World!" onclick="alert(this.value)"> がうまくブラウザで表示されません。ブログにあるように本来ならばボタンが表示されると思うのですが、 <input type="submit" value="Hello, World!" onclick="alert(this.value)">とそのまま文字が出るだけになっています。こちらは、なぜなのでしょうか？また、どうしたら正しい表示をできるのでしょうか？ご教示願います。私のPCはMacで、ブラウザはFireFoxを使用しました。（他のブラウザでも同様でした）

kabosu06
お礼率100% (2/2)

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

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

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

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2009/07/16 10:40 回答No.2

mac環境がないため、再現してみることができませんので、まったくの想像ですが… まず、拡張子は「.htm」「.html」などになっていますよね？（ファイルはプレーンテキストで出力されていますよね？）確か、macはヘッダーにもファイルの情報を持っていたような気がするので、念のため最小限のタグを入れて… <html><body> <input type="submit" value="Hello, World!" onclick="alert(this.value)"> </body></html> というテキストにしてもダメでしょうか？それでもダメな場合は、DTD宣言も入れて、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html><body> <input type="submit" value="Hello, World!" onclick="alert(this.value)"> </body></html> これでもダメな場合は、最初の質問に戻ってしまいます。ワードみたいなソフトだと普通にsaveして、後で拡張子をつけてもうまくいかないはず。（テキスト出力する必要あり）

質問者

お礼 2009/07/17 17:18

ご丁寧にありがとうございます！非常に助かりました。

その他の回答 (1)

askaaska
ベストアンサー率35% (1455/4149)

2009/07/15 17:00 回答No.1

これは実際にその記述を見ないことにはどう間違っているのかわからないわ。そもそもとしてあなたがどこに書いているのかもわからないし。そのブログに書かれているコードは間違っていないのだから。まさかとは思うけどあなたが<input～>を入力しているのはあなたのブログで記事の投稿欄に書いているなんてことがあったりするのかしら？大抵のブログでは <input～>を記事で投稿しても文字で<input～>と出てしまうはずよ。これはブログの仕様上どうすることもできないはず。

質問者

お礼 2009/07/15 23:05

askaaskaさん早い回答、ありがとうございます。＞あなたのブログで＞記事の投稿欄に書いている＞なんてことがあったりするのかしら？ブログではなく、 macのノートPCのテキストエディタに記載をしています。それをhtml形式で保存をして開こうとしているのですが、なぜかコードのみが出てしまいます。同様の作業を自宅のWindowsデスクトップでしたら、ちゃんとボタンが出てきました。。。 macの設定等が関係しているのでしょうか？もし、他に何か必要な情報がありましたら、ご用意させて頂きたいと思います。お手数ですが、よろしくお願いいたします。

関連するQ&A

ブラウザで表示されません（申し訳ありません。全くの初学者です。）
長いこと探したのですが、見つからなかったためご質問させて頂きます。お恥ずかしいのですが、教えて頂きますと非常に助かります。。。（http://blog.livedoor.jp/dankogai/archives/50940292.htmlを参考にしました） <input type="submit" value="Hello, World!" onclick="alert(this.value)"> がうまくブラウザで表示されません。ブログにあるように本来ならばボタンが表示されると思うのですが、 <input type="submit" value="Hello, World!" onclick="alert(this.value)">とそのまま文字が出るだけになっています。こちらは、なぜなのでしょうか？また、どうしたら正しい表示をできるのでしょうか？ご教示願います。私のPCはMacで、ブラウザはFireFoxを使用しました。（他のブラウザでも同様でした）
- 締切済み
- JavaScript
ブラウザに応じたJavaScriptの書き方
divの中にp、 pの中にspan、 spanの中にinputがあるとして、クリックしたらそれぞれの要素のタグををalertで表示させたいとき、（例１） <div onClick="a=event.target || event.srcElement;alert(a.tagName)">div 　<p>p 　　<span>span 　　　<input type="button" value="input"> 　　</span> 　</p> </div> で良いと思います。（IE,Safri,Chrome,Opera,Firefox,Lunascapeで確認済み）ただ、onClick内をスッキリさせたいので（例２） <script> function whereYouClick1(){ 　a=event.target || event.srcElement; 　alert(a.tagName); } </script> <div onclick="whereYouClick1();">div 　<p>p 　　<span>span 　　　<input type="button" value="input"> 　　</span> 　</p> </div> とすると、FirefoxとLunascapeで動かなくなります（よね？）。苦肉の策として（例３） <script> function whereYouClick2(){ 　alert(a.tagName); } </script> <div onclick="a=event.target || event.srcElement;whereYouClick2()">div 　<p>p 　　<span>span 　　　<input type="button" value="input"> 　　</span> 　</p> </div> としたらすべてのブラウザで動いたのですが、腑に落ちません。これなら（例１）のままの方がすっきりして良かったような気がします。ここ以外でも同じスクリプトを使いまわしたいときにはfunctionを定義したいところですが、 Forefox, Lunascapeのために（例３）の書き方にならざるを得なくなると思いますが、気持ち悪いです。もっときれいな書き方はないのでしょうか。また、上の例では一旦 a=event.target || event.srcElement; としてから、 alert(a.tagName) とやっていますが、 alert(event.target.tagName || event.srcElement.tagName) とやったらIEではエラーとなりました。そんなもんなんでしょうか。基本的な事柄で申し訳ありませんが、よろしくお願いします。
- ベストアンサー
- JavaScript
JavaScriptがFirefoxで動かない・・・
よろしくお願いいたします。 IEでは正常に動作するのですが、Firefoxで実行してみるとボタンを押しても何の反応もありません。どのように変更すればFirefoxで動作するのでしょうか？よろしくお願いいたします。 <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <FORM><INPUT type="button" value="ボタンを押して。" onClick="warning()"></FORM> 上記のコードを外部に独立させて・・・【コード】 <script type="text/javascript" src="sample3.js"></script> <input type = "button" name = "button3" value = "sample3" onclick = "Func3();"> 【sample3.js】 function Func3() { alert("js外部ファイル記述"); } です。 FC2ブログで活用したいのですが・・・改行の扱いは「HTMLタグのみ」に設定しています。ご回答、よろしくお願いいたします。
- 締切済み
- JavaScript
PC、携帯の両環境で有効なボタンの二度押し防止機能
自サイトのCGIにて、フォームのボタンに二度押し防止機能を付けたいのですが、まず当初 <input type="submit" value="$def_ok"> としていたものを <input type="button" value="$def_ok" onClick="this.disabled=true; this.value='$def_ok'; this.form.submit();"> としました。これでPCブラウザからの動作に問題は無いようなのですが、一部の携帯電話からのアクセスでボタンが機能しないという報告が多数寄せられまして（javascriptが機能していないため？）対策として <input type="submit" value="$def_ok" onClick="this.disabled=true; this.value='$def_ok'; this.form.submit();"> としました。（type=buttonを再度submitに変更） submitが二回で二重送信になりそうな気がしましたが… this.disabled=true;で最初のsubmitは無効になっていそうだから大丈夫かな、と思ったのですが、どうもやはりたまに二重送信が起こってしまっているようなのです。 100%ではなく、数十回に一回程度の割合で起こるようですがよく原因がわかりません。かと言って <input type="submit" value="$def_ok" onClick="this.disabled=true; this.value='$def_ok';"> とするとやはりPCブラウザからは無効になってしまうようで、ほとほと困り果ててしまいました。 CGIの性質上、二度押し防止機能自体は是非欲しいのですが… 何か上手い方法はありませんでしょうか？
- 締切済み
- HTML
JavaScriptのロジック？
<HTML> <HEAD> <TITLE>JavaScript</TITLE> <SCRIPT type="text/javascript">  </SCRIPT> </HEAD> <BODY> <form name="SampleForm" method="POST"> <table align="center"> <TR> <TD>OnClick機能 :　<Input type="text" name="nameOne" value="Ok"><Input type="submit" value="押して！" onclick="funDouble()" ></TD> <TD>| 結果 => | </TD> <TD>　OnChange後同じ値を２重表示 ;　<Input type="text" name="nameTwe" value="123456"></TD> </TR> </table> </form> </BODY> </HTML>
- ベストアンサー
- JavaScript
一度しか押せないボタンについて
以下のように一度しか押せないボタンを作ったのですが、すると今度はFORMで指定したactionが実行されません。どうしたらよいでしょうか。 <FORM action="...../～.cgi"><INPUT type="submit" value="　退　会　" onClick="alert('退会します!!');this.disabled='true';this.value='処理中です'"></FORM>
- ベストアンサー
- JavaScript
onclickイベントでの二重送信防止に関して
onclickイベントでフォームの二重送信の防止をしたいと考えています。 <input "type="submit">が一つしかないページでは、 <input "type="submit" onclick="this.disabled=true;this.value='送信中';this.form.submit();" value="送信"> でうまくいったのですが、２つ以上あるページだと、クリックすると空白のページに飛んでしまい、フォームが送信できませんでした。どのようにすれば、<input "type="submit">が2つ以上あるページでも、この方法で二重送信防止を作動させることができるでしょうか。ご教授よろしくお願いいたします。
- ベストアンサー
- JavaScript
php + javascriptで値の保持
現在、ラジオボタンによるデータの受け渡しを調べているのですが submitボタンを使わずに、データ遷移がしたいと思い色々やっているのですが上手く行きません。これは実現可能なのでしょうか？ <input type="radio" name="hoge" value="1" onclick="location.href='<?php echo $_SERVER['REQUEST_URI']; ?>'; test(this.value);" <?php echo $check1; ?>> <input type="radio" name="hoge" value="2" onclick="location.href='<?php echo $_SERVER['REQUEST_URI']; ?>'; test(this.value);" <?php echo $check2; ?>> <input type="radio" name="hoge" value="3" onclick="location.href='<?php echo $_SERVER['REQUEST_URI']; ?>'; test(this.value);" <?php echo $check3; ?>> 上記のソースの様な感じでとりあえずやってみましたが、「ボタンを押したら即移動」は可能なものの、value値の保持が javascript上でどうやったらいいか分かりません。 ※$check1～3は遷移後のchcked判定の変数です ※test関数においてのvalueを格納する処理が分かりませんやはり無難にsubmitボタン＋セッション関数等で構築した方が良いのでしょうか？
- ベストアンサー
- PHP
JavaScriptが動きません
下記のようなJavaScriptを作りましたが、IE8ではボタンを押しても「ようこそJavaScriptへ」が表示されません。「F12 Web開発者ツール」というのをチョッとイジったのですが、その為ではないかと思います。どこをどうイジったか覚えてません。どうすれば動作するようになるでしょうか、教えてください。動作状況　サーバーに置いてアクセスした場合は、「FireFox」「IE8」とも表示される。　ローカルデスクに置いてアクセスした場合は、「FireFox」では表示される、「IE8」では表示されない。 ☆OSはWindowsXP。 ☆IE8のセキュリティ設定で「アクティブスクリプト」は「有効にする」になってます。 ------JavaScript----------- <HTML> <BODY> <FORM> <P> <INPUT TYPE="submit" VALUE="ここを押すとメッセージが表示されます" ONCLICK="HelloWorld()"> </FORM> </BODY> </HTML> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT>
- 締切済み
- JavaScript
JavaScriptのinput要素のonclick内で直接JavaS
JavaScriptのinput要素のonclick内で直接JavaScript文を書きたい <input type="button" onclick="func()" value="ボタン"> のようにonclick内で関数を呼び出すことはできますが、以下のようにスクリプトを直接書き込むのは可能でしょうか？（これは私が適当に考えただけなので多分動作はしませんが） <input type="button" onclick="javascript:( var a = 123; alert( a ); )" value="ボタン"> というのもちょっと試したいだけのときなど、なるべく外部呼出しにしたくないことも多々あるもので・・
- ベストアンサー
- JavaScript

JavaScriptのブラウザ上での動作に関する問題

javascriptがブラウザ上でうまく動きません（すいません。初学者です。