JavaScriptを用いた画像切り替え

###初心者・javascriptを用いて一つのfanctionで画像の切り替えができるようにしたい
ここに質問したいことを詳細に書いてください
HTMLで作ったページに人物紹介のような形で、6人それぞれのボタンを押すと画像が切り替えられるようにしたいです。
http://weboook.blog22.fc2.com/blog-entry-6.html
このページを参考にそれぞれfanctionを使えば切り替えはできたのですが、一つの関数を使って処理をしなければなりません。
ですが、引数を使うということはわかるのですが、どのようにしたらいいか全くわかりません

教えていただければ幸いです。
よろしくお願いいたします。

takito

2017/04/11 09:18 編集

ご自身の書いたコード（HTMLとjavascript）も掲載すると具体的なアドバイスが貰えると思います。その際は<code>のボタンを押して```と```の行間に入れましょう。また、javascriptを日本語でジャバスクリプトと表記するのは一般的ではないのでちゃんと「javascript」と書いた方がよいですよ。

退会済みユーザー

2017/04/11 09:20

ありがとうございます！修正します

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

回答2件

画像を連番にできるならば、次のように行うことができると思います。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6</head>
7<body>
8<button>テキスト1</button>
9<button>テキスト2</button>
10<button>テキスト3</button>
11<button>テキスト4</button>
12<button>テキスト5</button>
13<button>テキスト6</button>
14<div>
15    <img src="" id="displayImage">
16</div>
17<script>
18    const elements = document.getElementsByTagName("button");
19    document.addEventListener("DOMContentLoaded", function () {
20        for (let i = 0; i < elements.length; i++) {
21            elements[i].addEventListener("click", function () {
22                document.getElementById("displayImage").setAttribute("src", "https://placehold.jp/3d4070/ffffff/150x150.png?text=image" + (i + 1));
23            });
24        }
25    });
26</script>
27</body>
28</html>

投稿2017/04/11 11:48

s8_chu

総合スコア14731

退会済みユーザー

2017/04/11 13:34

無事解決いたしました！ありがとうございます。 javascriptは手を付け始めてから数日ですが、このような書き方もできるのですね・・・とても勉強になります。

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

ベストアンサー

一つの関数を使って処理をしなければなりません。
ですが、引数を使うということはわかるのですが、どのようにしたらいいか全くわかりません

この質問文から実際に何がしたいのかはっきりと推測できません。「一つの関数を使って引数に応じた動作をしたい」と仮定すると例えば以下のようにできると思います。foo関数の引数に数字を渡し、それをインデックスとして配列からURLを取り出すという感じです。配列を使うというのはあまりいいコードではないかも知れませんが。

html
1<script>
2function foo(i) {
3  var images = [ "Aさんの画像URL", "Bさんの画像URL", ... ];
4  document.xxx.src = images[i];
5}
6</script>
7...
8<img src="最初に表示する画像のURL" name="xxx">
9...
10<form>
11 <input ... onClick='foo(0);'>
12 <input ... onClick='foo(1);'>
13 <input ... onClick='foo(2);'>
14 ...
15</form>