質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

3252閲覧

JavaScriptを用いた画像切り替え

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/04/11 09:04

編集2017/04/11 14:07

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takito

2017/04/11 09:18 編集

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

退会済みユーザー

2017/04/11 09:20

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

回答2

0

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

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は手を付け始めてから数日ですが、このような書き方もできるのですね・・・ とても勉強になります。
guest

0

ベストアンサー

一つの関数を使って処理をしなければなりません。

ですが、引数を使うということはわかるのですが、どのようにしたらいいか全くわかりません

この質問文から実際に何がしたいのかはっきりと推測できません。「一つの関数を使って引数に応じた動作をしたい」と仮定すると例えば以下のようにできると思います。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>

投稿2017/04/11 10:18

KSwordOfHaste

総合スコア18392

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/04/11 11:18

ありがとうございます! また後ほどソースはあげるつもりですが、 少し解決策が見えてきました!
退会済みユーザー

退会済みユーザー

2017/04/11 13:33

解決できました!ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問