質問

JavaScriptのフォームを作成しています。
ドロップダウンリストから項目を選んでそれに対応した数字を表示するものを作っています。
ドロップダウンリストは二つ用意しているのですが、二つとも処理自体は似たようなものになっています。

document.getElementByIdを用いて

と記述し二か所に結果を表示しています。同じような処理なので一つの関数にまとめたいのですが、表示したい位置が別々で2つの結果を同時に表示したいためそのような場合はどのように記述すればよいかわかりません。
ご教示いただけますと幸いです。

コード

javascript
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5
6    <script type="text/javascript" language="javascript">
7
8        function output_waribiki(ele) {
9            var element = document.getElementById("waribiki");
10            var str = element.value;
11            document.getElementById("output_waribiki").textContent = str;
12        }
13
14        function output_waribiki2(ele) {
15            var element = document.getElementById("waribiki2");
16            var str = element.value;
17            document.getElementById("output_waribiki2").textContent = str;
18        }
19
20    </script>
21
22</head>
23
24<body>
25    割引料金（一般）
26    <span id="output_waribiki"></span>
27    <br>
28    <select id="waribiki">
29        <option value="300">小学校</option>
30        <option value="500">中学校</option>
31        <option value="700">高等学校</option>
32    </select>
33    <input type="button" value="計算" onclick="output_waribiki(this)" />
34
35    <br>
36    <br>
37    割引料金（会員）
38    <span id="output_waribiki2"></span>
39    <br>
40    <select id="waribiki2">
41        <option value="100">小学校</option>
42        <option value="300">中学校</option>
43        <option value="500">高等学校</option>
44    </select>
45    <input type="button" value="計算" onclick="output_waribiki2(this)" />
46
47
48</body>
49
50</html>

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

回答2件

具体的な例は回答が既に出ていますが、
同じような関数だなと思ったら「2つの関数を並べて、差のある部分を引数として抜き出す」とやると良いです。

投稿2019/09/29 10:40

tanishi_a

総合スコア484

nogimareske

2019/09/29 11:14

差の部分に着目すればよかったのですね！これからは同じような関数だなと思ったらそのことを念頭に置いてやるようにしようと思います。回答ありがとうございました。

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

ベストアンサー

文字列は""で囲んでも''でもいいです。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <script type="text/javascript" language="javascript">
5      function output_waribiki(ele, select_id) {
6        var element = document.getElementById(select_id);
7        var str = element.value;
8        var output_id = "output_" + select_id;
9        document.getElementById(output_id).textContent = str;
10      }
11    </script>
12  </head>
13
14  <body>
15    割引料金（一般）
16    <span id="output_waribiki"></span>
17    <br />
18    <select id="waribiki">
19      <option value="300">小学校</option>
20      <option value="500">中学校</option>
21      <option value="700">高等学校</option>
22    </select>
23    <input type="button" value="計算" onclick="output_waribiki(this, 'waribiki')" />
24
25    <br />
26    <br />
27    割引料金（会員）
28    <span id="output_waribiki2"></span>
29    <br />
30    <select id="waribiki2">
31      <option value="100">小学校</option>
32      <option value="300">中学校</option>
33      <option value="500">高等学校</option>
34    </select>
35    <input type="button" value="計算" onclick="output_waribiki(this, 'waribiki2')" />
36  </body>
37</html>