javascripyで書いた複数の関数をどれか1つだけ呼び出す方法

###前提
monacaを使用して開発しています。<head>内に

javascript
1 function look()
2    {
3 niku=document.change.menu.selectedIndex;
4 image=document.change.menu.options[niku].value;
5 document.a.src=image;
6    }
7function look2()
8    {
9 test=document.change.menu.selectedIndex;
10 image=document.change.menu.options[test].value;
11 document.b.src=image;
12    }

<body>内のプルダウンメニューで ``` <FORM method="post" name="change"> <SELECT name="menu" onchange="look(),look2();"> <option value="a2.png">aの画像を表示</option> <option value="b2.png">bの画像を表示</option> </SELECT> </FORM> ``` と書いてあります。

###実現したいこと
aの画像を表示でaの部分がa2に変更される
bの画像を表示でbの部分がb2に変更される

という１対１対応の形をとりたいです。

###起きていること
aの画像を表示を選択するとaとbの画像が消えa2の画像が表示される

<SELECT name="menu" onchange="look(),look2();"> この部分を変更するのかな？と予想はしているのですが… どう記述すればよいのでしょうか…よろしくお願いします。

yambejp

2017/08/22 11:36

doucment.aやらdocument.bが提示されていないので例示のものでは挙動が確認できません。またオブジェクトの参照の仕方もそうとう古めの書き方ですがこれを前提にしたほうがよいのでしょうか？

hain

2017/08/22 11:59

古い書き方なのですね…それすら判断できませんでした。ありがとうございます。doucment.aやdocument.bは本体では記述しております！こちらの質問で記入漏れをしてしまいました申し訳ありません。目的の挙動が実装できればいいので待った宇別の手法でもだいじょうぶです！！

行動規範の内容に同意します

回答1件

ベストアンサー

的外れかもしれませんが、以下のようにしてはいかがでしょうか？document.aやdocument.bは記述がなかったのでこちらで適当に用意しました。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11    </style>
12</head>
13<body>
14<FORM method="post" name="change">
15    <SELECT name="menu" onchange="func()">
16        <option value="https://placehold.jp/3d4070/ffffff/150x150.png?text=a2.png">aの画像を表示</option>
17        <option value="https://placehold.jp/3d4070/ffffff/150x150.png?text=b2.png">bの画像を表示</option>
18    </SELECT>
19</FORM>
20<img id="a">
21<img id="b">
22<script>
23    function func() {
24        document.change.menu.selectedIndex === 0 ? look() : look2();
25    }
26
27    function look() {
28        niku = document.change.menu.selectedIndex;
29        image = document.change.menu.options[niku].value;
30        document.getElementById("a").src = image;
31        document.getElementById("b").src = "";
32    }
33
34    function look2() {
35        test = document.change.menu.selectedIndex;
36        image = document.change.menu.options[test].value;
37        document.getElementById("a").src = "";
38        document.getElementById("b").src = image;
39    }
40
41    window.onload = func;
42</script>
43</body>
44</html>