- ベストアンサー
JAvaScriptの外部ファイルの記述について
HTML内にJavaScriptの処理書くのが嫌で、外部ファイルにしてJavaScriptを読み込むようにしたのですが、このファイルに、実行したい処理を複数書いてしまうとHTMLで正しく処理されなくなるのは何故ですか？.jsファイルには処理は1つしか記述できないのでしょうか？CSSファイルみたいに1つのファイルに何個も処理を記述してHTMLに反映させるようにしたいのですが・・・。どなたにも質問できず困っています。どなたか教えて下さい。jsファイルには処理は1つしか記述できないものなのかどうか回答お願い申し上げます。
- u2122
- お礼率71% (127/178)
- JavaScript
- 回答数7
- ありがとう数3
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
> window.onload=function(){ window.onload を2つ定義すると、2つめの window.onload で1つめのfunctionを上書きしてしまいます。 解決策としては、 - window.onload を一つにまとめる - イベントリスナを使う - addLoadEvent() を定義 - addEvent() を定義 などでしょうか。 javascript windowイベントに複数を指定する に関しての質問です。 ブログパーツを作っています。 window.onloadを使って、ページの読込みが完了したらある処理を開始する.. - 人力検索はてな http://q.hatena.ne.jp/1189656066 Google検索: addLoadEvent http://www.google.co.jp/search?q=addLoadEvent&lr=lang_ja&ie=utf-8 Google検索: addEvent http://www.google.co.jp/search?q=addEvent&lr=lang_ja&ie=utf-8
その他の回答 (6)
- babu_baboo
- ベストアンサー率51% (268/525)
#6です。ていせいします。 elementId を element に。 ごめん。
お礼
ありがとうございます。出来ました！
- babu_baboo
- ベストアンサー率51% (268/525)
いべんとのうわがきじゃなくて、つ・い・か！ ばぶ～。 //@cc_on function addEvent(elementId, evt, eventHandler){ element./*@if(@_jscript)attachEvent('on'+ @else@*/addEventListener(/*@end@*/evt, eventHandler, false); } addEvent('pohot1', 'mouseover', func1) addEvent('pohot2', 'mouseover', func2) addEvent('pohot1', 'mouseout', func3) addEvent('pohot2', 'mouseout', func4) function func1 (evt) { var e = evt./*@if (@_jscript) srcElement @else@*/ target /*@end@*/; e.src = './img/door01.gif'; }
- fujillin
- ベストアンサー率61% (1594/2576)
No4です。 「imgフォルダ内にbutton11.gifがない」なんて落ちじゃないですよね？
補足
すみません。自分間違っていました！コピペを間違っていたですよ。 ちゃんと動きました。丁寧に教えて頂いてありがとうございました
- fujillin
- ベストアンサー率61% (1594/2576)
理由はNo2、No3様のご回答の通りです。 あまりうまい書き方ではないですが、御提示のものをそのまま踏襲するなら… window.onload=function(){ document.getElementById("photo1").onmouseover=function(){ this.src="img/button11.gif"; } document.getElementById("photo1").onmouseout=function(){ this.src="img/button01.gif"; } document.getElementById("photo2").onmouseover=function(){ this.src="img/door02.gif"; } document.getElementById("photo2").onmouseout=function(){ this.src="img/door01.gif"; } } これは、No2様の回答のなかの一番最初の方法です。 動かない理由や、（それ以前に）どのように動作しているかを他の方の回答をヒントにちゃんと理解するようにしてください。
補足
まんまごっそりコピーして main.jsに貼り付けて、main.htmlを開いてみたのですが、やはりphoto2しか動きません ？？？？ 「上書きされてしまう」ということが分かったので、皆様の回答をヒントに自分でもう少し頑張ってみます！ありがとうございました！！
- yyr446
- ベストアンサー率65% (870/1330)
window.onload=function(){} の意味は、「windowオブジェクトに対して、onloadのイベントが 発生したとき、function(){}を実行する」の意味です。 このイベントに複数のfunctionをセットする方法は、Ｎｏ２で解答されてますが、匿名関数にする必要がなければ、 window.onload=function(){func1();func2();func3()} として var func1 = function(){}; var func2 = function(){}; var func3 = function(){}; とか、 func1 function(){} func2 function(){} func3 function(){} にしてしまってもよいです。 ※変数や関数のスコープには注意する必要があります。
- yambejp
- ベストアンサー率51% (3827/7415)
ごめんなさい、言っている意味があいまいすぎて回答のしようがありません。 具体的にどうすると、どうなるのが気に入らないのでしょうか？ ＞.jsファイルには処理は1つしか記述できないのでしょうか？ 普通に考えれば、そんなことはありません
補足
回答ありがとうございます。すみません補足します。 以下を動かしたいのですが ＜＜main.js＞＞ window.onload=function(){ document.getElementById("photo1").onmouseover=function(){ this.src="img/button11.gif"; } document.getElementById("photo1").onmouseout=function(){ this.src="img/button01.gif"; } } window.onload=function(){ document.getElementById("photo2").onmouseover=function(){ this.src="img/door02.gif"; } document.getElementById("photo2").onmouseout=function(){ this.src="img/door01.gif"; } } ＜＜main.html＞＞ <?xml version="1.0" encoding="shift_jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="main.js"></script> <script type="text/javascript" src="executes.js"></script> <title>JavaScript</title> </head> <body> <a href="top.html"><img src="img/button01.gif" width="300" height="55" alt="photo1" id="photo1" /></a><br /> <a href="top.html"><img src="img/door01.gif" width="171" height="135" alt="photo2" id="photo2" /></a> </body> </html> 何故両方動かないのでしょうか？？教えて下さい。 処理が間違っているのでしょうか？よろしくお願い申し上げます。
補足
ありがとうございます。 上書きされてしまって1つ目が実行されないと言うのは理解出来ました。解決策も教えて頂き誠にありがとうございます。 ですが、解決策のどれかを使って、 main.jsの何処をどう書き換えれば両方とも実行されるのかが、分かりません。すみません。プログラムコードを教えて頂いてよろしいでしょうか？