マンガでよめる痔のこと・薬のこと

javascript初心者で質問自身が僕が解決したい問題の原因かどうかも解らずに質問しています。

<script type="text/javascript">
<!--
function hoge_1() {
~処理1~
}
function hoge_2(hiki_suu) {
~処理2~
}
window.onload = function() {
document.getElementById("button_1").onclock = hoge_1;
document.getElementById("button_2").onclock = hoge_2("watasu");
}
// -->
</script>

上記のようにページheadにscriptを配置したとします。ページ上のbutton_1がクリックされると処理1が実行されるのですが、hoge_2のように引数を使ってしまうと、onload時に処理2を実行してしまい、button_2は有効に動作しません。
functionの引数の問題なのか、window.onloadの作法なのか、なにが悪いのか全く解らず質問しています。

ご指導のほどよろしくお願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

根本的な話として、イベントリスナ(イベントハンドラ)というのは「第一引数にイベントオブジェクトをとる関数」なのです。

これはこういう定義ですので、何だかんだ言っても始まりません。

function onLoad (e /*イベントオブジェクト*/) {
 ;
}

であれば、そもそも「イベントハンドラに引数を渡したい」という要望自体が成り立たないことにお気付きでしょう。引数を渡したい関数があるなら、イベントハンドラの中で呼び出すのです。

function onLoad (e) {
 hoge_2("watasu");
}
addEventListener("load", onLoad, false);

window.onload でも同様ですが、この古いイベントプロパティを使うのは最後の手段にして下さい。

---
ついでに、click はバブリングしますので、いちいち load を待って個々の要素にハンドラを取り付ける必要などありません。

document.addEventListener("click", function (e) {
 var t = e.target;
 var c;
 for (c = t; c; c = c.parentNode) {
  switch (c.id) {
  case 'button_1' : return hoge_1();
  case 'button_2' : return hoge_2("watasu");
  }
 }
}, false);

これだけで十分です。IE8 以下なら addEventListener の代わりに attachEvent、e.target の代わりに e.srcElement でも使って下さい。

イベント周りは、知らなければどうしようもないことが多いので、試行錯誤する前に仕様・解説書を一通り眺めた方が良いです。
    • good
    • 0
この回答へのお礼

document.addEventListenerの部分を利用したところ、期待した結果を得られました。
そもそもイベントリスナが理解できてなく、勉強してみたいと思います。
ありがとうございました。

お礼日時:2011/05/23 15:24

onload時に実行したい内容は、「各ボタンに関数を代入する」ことと思われますが、button_2の箇所では代入ではなく関数の実行がなされています。

onloadの作法云々は関係ありませんね。基本的なことで、hoge_2は変数扱いですが、hoge_2()と書くと実行扱いになってしまいます。

もちろん、hoge_2()という書き方にしているのは、「引数があるから」というのがすごく分かります。
たとえばこの場合の解決策として、No.3さんのように、エレメントに直接書く方法が一番手っ取り早いです。
ただし、htmlとjsを分離して効率を上げるという意味では、htmlに直接書くことになるため、最善の方法ではないかもしれませんね。

次に、関数を使いまわさなくてもよい(引数の必要ない形)のであれば、以下のように直接関数定義することができます。

window.onload = function() {
 document.getElementById("button_1").onclick = function(){
  処理1
 };
 document.getElementById("button_2").onclick = function(){
  var hiki_suu = "watasu";
  処理2
 }
}

もちろん、処理2で引数を与えているぐらいですから、上記の例は現実的でない解決策です。
上記の例は、引数を固定できる場合の例です。
では、引数を与えつつ、buttonに関数を定義するにはどうすればいいか。
そこで、必要になってくるのがNo.1さんの回答です。
いってみれば、私の回答はNo.1さんの補足です。
    • good
    • 0
この回答へのお礼

大変参考になりました。ありがとうございます。

お礼日時:2011/05/23 15:20

質問者様がやりたいことが「ページ上のbutton_1がクリックされると処理1が実行され、button_2がクリックされると処理2が実行される。


と言うことで良ければ、下のように書いた方がよいのでは・・・?。

<form>
<input type="button" value="button_1" onClick="hoge_1()">
</form>

<form>
<input type="button" value="button_2" onClick="hoge_2("watasu)">
</form>
    • good
    • 0

訂正。

hoge_2("watasu")はclickの方でした。

function onClick (e) {
 hoge_2("watasu");
}
document.getElementById("button_2").addEventListener("click", onClick, false);

しかし、個々の要素にいちいちイベントリスナを取り付けるべきでないことは繰り返し主張いたします。innerHTML などの書き換えであっさり消滅してしまいます。
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qwindow.openで値の渡し方を教えてください。

画像をクリックするとwindow.htmlで新しいウインドウが開き、「IMG/AAA.jpeg」という値をwindow.htmlに渡して、画像を表示したいのですが、どのようにすればよいでしょうか。

画像をクリック(photoOpnに値が渡される)→関数photoOpn実行(window.htmlに値が渡される)→window.html表示(値を受け取り画像を表示)といった具合にしたいのですが・・・。

<html>
<head>
<script type="text/javascript"><!--
photoOpn(value){
window.open("window.html");
}
//--></script>
</head>

<body>
<a href="javascript:photoOpn('IMG/AAA.jpeg')"><img src="IMG/AAA.jpeg"></a>
</body>

ここまではやってみたのですが、window.htmlにどのように値を渡せばいいのでしょうか。

Aベストアンサー

>>1
> 結構複雑になってしまいますね。Javascriptを勉強してまもないので
> 難しく感じてしまいます(笑)
> 図々しいとは思いますが、少しながら関数等のscriptの説明をして
> 頂けませんでしょうか。

すみませんでした。
自分でやるときもなかなかコメントつける癖がなくて暫く経ったら
自分の書いたコードさえ解読できなくなることが多々あったりします。
それでも、コメント書くのが面倒だったりそもそも適切なコメントが
思い浮かばずつい、省略してしまうことが多くて自分でも困っていたり
します。(^_^;

やっていること自体は決して複雑ではないはずなんですけど、確かに
難しいかも知れませんね。

// URL エンコード
url = encodeURIComponent(url);

これはURLエンコードしています。
クエリに非ASCII文字列などを含めるときはURLエンコードします。
スラッシュはディレクトリ区切りとしても使用されているのでURLと
しては使用可能ですが念のためにURLエンコードしています。
因みにJavaScriptにはURLエンコードする関数がいくつかありますが
スラッシュをエンコードできるのは上記の関数のみのようです。
また、日本語などの文字列が含まれる場合、元の文字列が何であっても
強制的にUTF-8としてURLエンコードしてしまいますのでご注意ください。

window.open('window.html?url=' + url);

これはそのまま、URLにクエリを追加して渡しているだけです。

var query = location.search.substr(1).split('&');

ここが一番分かりにくい可能性がありますが

location.search

はURLのクエリの部分(?含む)を文字列オブジェクトとして返します。

.substr(1)

は1文字目(?を飛ばす)移行を取得しています。

.split('&')

は '&' を区切りとして分割し配列として返します。
(念のため複数のクエリが渡されたときを考慮して)

var base = './';

これは画像ファイルのURLパスです。
相対パスと絶対パスどちらも指定できます。
最後は必ずスラッシュで終わってください。

if(query != '') {

これはクエリがから文字列でなかったらという条件文です。
この条件に一致したらこれ以降のブロックを実行します。

var req = new Array();
for(var i = 0; i < query.length; i++) {
var key = query[i].split('=');
req[decodeURIComponent(key[0])] = decodeURIComponent(key[1]);
}

ここは、各クエリを連想配列に代入しています。
ここはPerlCGIなどで使用されている部分をそのままJavaScriptに
移植してみました。
代入するときにキーと値の両方をURLデコードしています。

var img = document.createElement('img');
img.setAttribute('src', base + req['url']);
document.getElementById('img').appendChild(img);

ここは img エレメントを作成し、 'img' のIDをもつエレメントの
子要素として作成した img エレメントを追加しています。

あと、うっかり忘れていて説明している段階で気がついたのですが
上記のコードの前に req['url'] があるかどうか調べないとエラーが
でる可能性が...。

説明が下手なので却って分かりにくいかも知れませんがご了承ください。
かくコード部分の詳細はネットで調べた方が早くてもっと分かりやすく
説明している所があると思いますよ。
(そもそも上記はほとんどネットから集めた情報を組み合わせただけ
ですので)

>>1
> 結構複雑になってしまいますね。Javascriptを勉強してまもないので
> 難しく感じてしまいます(笑)
> 図々しいとは思いますが、少しながら関数等のscriptの説明をして
> 頂けませんでしょうか。

すみませんでした。
自分でやるときもなかなかコメントつける癖がなくて暫く経ったら
自分の書いたコードさえ解読できなくなることが多々あったりします。
それでも、コメント書くのが面倒だったりそもそも適切なコメントが
思い浮かばずつい、省略してしまうことが多くて自分でも困っていたり
しま...続きを読む

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。

Q別ファイルのfunctionの読み込み方

こんにちは
外部ファイル hello.js
-----------------------------
function aisatsu(){
var aa="hello"
}
-----------------------------
というファイルが存在した時にjikkou.htmlでaaの値、”hello”を呼び込みたい場合はどう記述すればよいのでしょうか?htmlのなかでaisatsu()をどこに記述していいのか分かりません。どうか教えてください。ただ、hello.jsのほうは実際の記述を簡略化したものであるのでそちらのほうはいじれません。

宜しくお願いします。

必要ないかもしれませんが、念のために私が最初に書いたhtmlの文です(もちろん実行できませんでした)
------------------------------------
<html>
<script language="javascript" src="hello.js">
aisatsu(){
document.write(aa);
}
</script></html>
------------------------------------

こんにちは
外部ファイル hello.js
-----------------------------
function aisatsu(){
var aa="hello"
}
-----------------------------
というファイルが存在した時にjikkou.htmlでaaの値、”hello”を呼び込みたい場合はどう記述すればよいのでしょうか?htmlのなかでaisatsu()をどこに記述していいのか分かりません。どうか教えてください。ただ、hello.jsのほうは実際の記述を簡略化したものであるのでそちらのほうはいじれません。

宜しくお願いします。

必要ないかもしれませんが、念のために...続きを読む

Aベストアンサー

function内で「var」をつけて変数を宣言するとfunction外からその変数の内容を取得することができなくなります。(returnで参照することはできます。)
なので変数の内容を取得する場合は「hello.js」の内容を

function aisatsu(){
var aa="hello";
return aa;
}

このように修正し、

<script language="javascript" src="hello.js"></script>
<script language="javascript">
var data=aisatsu();//「aisatsu()」関数の「aa」変数内のデータを引っ張り出す(return aa;)
document.write(data);//書いたり
alert(data);//アラートしたり
window.status=data;//ステータスバーに表示したり・・
</script>

Q「関数が定義されていない」とのエラーが出る

こんにちは,よろしくお願いします。
何が何だか分からなくて困っています。
IEでは問題なく動くのに,Firefoxだと関数が定義されていないとのエラーが出ます。「<関数名> is not defined 」

スクリプトは,外部ファイル化してあります。キータイプの間違いもありません。何度も確認しました。

function aaa(){
 (スクリプト)
}

<body onload="aaa()">
のようにして呼び出しています。
いったい,何が悪いのでしょうか?

また,Operaだと,「リンク先のスクリプトを読み込むことができません」とのエラーが出ます。
元になるPHPファイルでは,
<script type="text/javascript" language="javascript" src="../javascript/AAAAA.js"></script>
のようにして呼び出しています。
もちろん,ファイルネームのタイプミスはありません。

ちなみに,スクリプトの内容は,日付関連のコードを記述しています。
試行錯誤している時に,他の日付関連のコードを実行したときに,
dayoption is not defined
というエラーが出たことがあります。
関数が存在しているのに,定義されていないと出るのは,もしかすると,日付関連の関数等の使い間違いではないかとも考えています。
使っているものは,Date()とgetYear()です。これらのうちのどちらかがFirefoxやOperaだとサポートされていないのでしょうか?

どうか御指導ください。よろしくお願いします。

こんにちは,よろしくお願いします。
何が何だか分からなくて困っています。
IEでは問題なく動くのに,Firefoxだと関数が定義されていないとのエラーが出ます。「<関数名> is not defined 」

スクリプトは,外部ファイル化してあります。キータイプの間違いもありません。何度も確認しました。

function aaa(){
 (スクリプト)
}

<body onload="aaa()">
のようにして呼び出しています。
いったい,何が悪いのでしょうか?

また,Operaだと,「リンク先のスクリプトを読み込むことが...続きを読む

Aベストアンサー

たぶんなんらかの凡ミスでしょうけど・・・・
firefoxでだめなら、firefoxのアドオンのfirebugで検証するのが一番です

Qで配列(複数の要素)を渡したいとき?

こんにちわ,

今HTML+PHPで
$hoge[]にいくつかの要素が入っているとき,
それをあるfoo.phpというページに渡したいとき,
echo '<form action="foo.php" method="POST">';
echo '<input type="hidden" name="$hoge[]" >';
echo '</form>';
としたのですが,うまくいきません。

どうしたらよろしいでしょうか。

Aベストアンサー

nameじゃなく、valueでは?
あとやるなら、
for($i=0;$i<count($hoge);$i++){
print "<input type=\"hidden\" name=\"$hoge[$i][0]\" value=\"$hoge[$i][1]\">";
}
とか?

Q関数を呼び出すHTMLタグについて

ほぼ独学でJavaScriptを学んでいるので、一般的なコード(HTML含め)の書き方が分かりません。
JavaScriptでは、ボタンや画像をクリックすると動作する、
というものが多いですが、そうではなくて、
(それはonclick等で関数を呼び出せば良いことは分かります)
時計のように、アクセスした瞬間から実行されるプログラムを複数書きたい時は、
どのようにするのが妥当でしょうか。
<body onload="hoge()">では、関数hoge()しか実行されないことになりますよね。
そうではなくて、hoge()以外にもいくつかの関数を実行したい時はどうするのが一般的ですか?
ここでC言語のように、hoge()をmain関数(int main(void){})のような扱い方にすると、
hoge()関数内で呼び出されている関数も呼び出されることになりますが、そのような書き方で良いですか?
アクセスの効率の良さから考えて、他に良いやり方はあるでしょうか。

・・・前に困ったので<body>タグを2つ付けて2つの関数をonloadアトリビュートで呼び出すという、
奇々怪々なことをやってみて、それでIE7,FireFox3で動いていたので驚いたんですが、
そんなやり方はさすがに御法度ですよね(笑)。

答えにくい質問だと思いますが、アドバイスお願いします。

ほぼ独学でJavaScriptを学んでいるので、一般的なコード(HTML含め)の書き方が分かりません。
JavaScriptでは、ボタンや画像をクリックすると動作する、
というものが多いですが、そうではなくて、
(それはonclick等で関数を呼び出せば良いことは分かります)
時計のように、アクセスした瞬間から実行されるプログラムを複数書きたい時は、
どのようにするのが妥当でしょうか。
<body onload="hoge()">では、関数hoge()しか実行されないことになりますよね。
そうではなくて、hoge()以外にもいくつか...続きを読む

Aベストアンサー

""の中がスクリプトなので、<body>タグを2個書かないでも、実行する関数の数が少ないのなら
 <body onload="A(); B();"> みたいなのでもOK。
あるいは window.onload を用いれば、<body>タグ内に書かないでもすみます。
(二重定義になると、後方優先になりますが…ANo2参照)

<html>
<head>
<script type="text/javascript">
window.onload = function(){
  B();
  A();
}
function A(){ alert("A"); }
function B(){ alert("B"); }
</script>
</head>
<body>
<!-- <body onload="A(); B();"> 注)コメント行 -->
</body>
</html>

Q画面間でのJavaScriptでの値の受け渡しについて

お世話になります。

画面(ASPで作成した画面)間でのJavaScript同士の値の受け渡しは出来るのでしょうか。

画面1から画面2を開き、画面2のJavaScriptの関数内で画面1のJavaScriptの値を変えると言った事は出来るのでしょうか。

何方かご存知でしたら、お教え下さい。
宜しくお願い致します。

Aベストアンサー

IEとFireFoxで試してみましたけど、できそうですね。
tes1.htmlからtes2.htmlを開いた場合のソースです。
関数はボタンとかから適当に呼んでください。

// tes1.htmlのJavaScript
var value=0;
function msg () {
alert(value);
}
function openWnd () {
wnd = window.open("tes2.html");
}

// tes2.htmlのJavaScript
function count () {
opener.value++; // openerが親元
alert(opener.value);
}

QINPUTでデフォルト値(数値)をあらかじめセットしておきたい

INPUT時に入力BOXへ入力しますが、ここにあらかじめ数値をセットしておきたいと思います。
どのようにするのでしょうか?
通常だと空白なので、そこに手で「123」のように入力しないとだめなのですが、あらかじめ「123」を入れておいて入力の簡便化を図りたいと思います。
よろしくお願いいたします。

Aベストアンサー

# 状況の説明を適切にしましょう
> tokcodeという項目名に「123」が入っている場合に項目名で指定する方法がわかりません。

クライアントスクリプトで処理する事お望みですか?
それとも サーバーサイドの動的な変更をお望みなのでしょうか

それにより処理法方が異なります

クライアントサイドならVBScriptやJavaScriptを記述して希望するイベント条件でエレメントを特定しデータを取得、更新します

たとえば ページが完成した場合なら bodyタグ(またはWindow)のonloadイベントで処理します
< script type="text/javascript" >
function myLoad()
{
  var objSrc, objTrg;
  objSrc = document.getElementById("tockcode");
  objTrg = document.getelementById("txt1");
  if ( ( objSrc != "undefined" ) && (objTrg != "undefined" ) ){
    objTrg.value = objSrc.value;
  }
}
window.onload = myLoad;
</scriipt>
といった具合になります

サーバーサイドの場合 tockcodeの詳細が不明なので …
<%
dim sTockCodeValue
sTockCodeValue = サーバサイドでtockcodeからデータを取得
%>
<input type="text" id="txt1" value="<%= sTockCodeValue %>">
といった記述でしょう

# 状況の説明を適切にしましょう
> tokcodeという項目名に「123」が入っている場合に項目名で指定する方法がわかりません。

クライアントスクリプトで処理する事お望みですか?
それとも サーバーサイドの動的な変更をお望みなのでしょうか

それにより処理法方が異なります

クライアントサイドならVBScriptやJavaScriptを記述して希望するイベント条件でエレメントを特定しデータを取得、更新します

たとえば ページが完成した場合なら bodyタグ(またはWindow)のonloadイベントで処理します
< sc...続きを読む

Qonclickで2個指定するには?

例えば、下記のような二つの指定があるします。

function checkd1(){
document.FORM.CHECK1.checked=true
}
function checkd2(){
document.write("テスト");
}

これをonclickで二つとも指定するということはできるのでしょうか?

<a href="#" onclick="checkd1()">ボタン</a>
<a href="#" onclick="checkd2()">ボタン2</a>

を<a href="#" onclick="checkd1(),checkd2()">ボタン</a>としても動いてくれないので、書き直すのではなく、このまま二つを指定したいのですが、どうすればよいのでしょうか?

Aベストアンサー

><a href="#" onclick="checkd1(),checkd2()">ボタン</a>

<a href="#" onclick="checkd1();checkd2()">ボタン</a>

おしいですね。
, ではなく ; なら両方の関数が呼ばれると思います。
(Firefox3とIE6で確認しました。)

なぜ ; かと言うと、
Javascriptの文法で、文の区切りは ; だからですね。


人気Q&Aランキング