先日公開したどこ旅の追加コンテンツを開発しています。
そのほとんどをjavascriptで動かそうと思っています。
javascriptに苦手意識があり今まで極力避けてきたのですが、結構わかってくると面白いですね。
javascriptといったら関数(function)を作って、それを呼び出すという方法が主な使い方だと思うのですが、1つのイベント(今回はonchangeでした)発生時に複数の関数を呼び出すことに迷いが出たので、今回の記事ではそのシェアをさせていただきます。
そもそもイベントがよくわからない方はこちらがオススメ↓

JavaScriptのイベントハンドラ一覧|イベント|JavaScript/DOM|PHP & JavaScript Room
JavaScriptの基本~実用的な関数までサンプル付きで解説。
ロールオーバー、ウィンドウ操作、連動プルダウン、入力チェック(正規表現含む)など、
サイト制作に使える実用的なスクリプトを紹介。コピペで使えます。
JavaScriptでDOM(Document Object Model)のメソッド・プロパティ...
プルダウンの内容変更時、
function test1()
function test2()
を同タイミングで呼び出すことをゴールとします。
function test1()
function test2()
を同タイミングで呼び出すことをゴールとします。
微妙な例
<select name="aaa" id="aaa" onchange="test1()" onclick="test2()">
というときみたいに
<select name="aaa" id="aaa" onchange="test1()" onchange="test2()">
でも動きますが、ちょっとカッコ悪いですね。
正解
綺麗な形はこれです。
<select name="aaa" id="aaa" onchange="test1();test2()">
2つの変数を一気に記載して、その間にセミコロンを入れる!
まとめ
fuction呼び出し用のまとめfunctionを作ってもいい気もしますが、、、
matome(){ test1(); test2(); }
セミコロンで区切るだけなのでこのほうが簡単でいいでしょう。
onchangeでお話ししましたが、その他のイベントの場合でも使えるのでこれを1つ覚えてしまえば応用が効くでしょう!
お知らせ
海外旅行が好きな方、是非どこ旅というサイトを使ってみてください!
気温や飛行時間から海外旅行先を検索 | どこ旅
気温や飛行時間からお好みの旅先を探すことができます。具体的な場所は決まっていなくても、あなたにおすすめの旅行先を見つけることができます。
コメント