JavaScriptについて教えてくだ

１のコードでは、aaa.gifをクリックすると
アラートが表示されますが、
違う画像を２個並べた２のコードでは
アラートは表示されません。

画像ごとに違うアラートを出したいのですが、
関連付けるためにはどのようにしたらよいでしょうか？
よろしくお願い致します。

１

<div class="sample1">
<a href="#" onclick="imgClick();">
<img src="aaa.gif">
</a>
</div>

<script>
    function imgClick() {
alert("http://○○.jp/aaa.gif");
}
</script>

２

<div class="sample1">
<a href="#" onclick="imgClick();">
<img src="aaa.gif">
</a>
</div>

<script>
    function imgClick() {
alert("http://○○.jp/aaa.gif");
}
</script>
<div class="sample1">
<a href="#" onclick="imgClick();">
<img src="bbb.gif">
</a>
</div>

<script>
    function imgClick() {
alert("http://○○.jp/bbb.gif");
}
</script>

namnium1125

2018/02/17 09:45 編集

「アラートは表示されません。」というのはどちらをクリックしても「http://○○.jp/bbb.gif」になるという意味でOKでしょうか？

退会済みユーザー

2018/02/17 14:43

「どちらをクリックしても何にも反応しません」という意味になります。よろしくお願い致します。

namnium1125

2018/02/17 15:12 編集

こちらでは『どちらをクリックしても「http://○○.jp/bbb.gif」になる』という挙動を取りましたが、環境によって違うのかもしれませんね(できたらエラーログが出てないか確認していただきたいです)。まぁいいや、解決策は回答した通りです。

退会済みユーザー

2018/02/18 03:13 編集

依頼した内容は、aaa.gifをクリックすると「http://○○.jp/aaa.gif」、bbb.gifをクリックすると「http://○○.jp/bbb.gif」というアラートが出るものになります。ちなみにコードAを設定すると、「http://○○.jp/undefined」とエラーがでました。

namnium1125

2018/02/18 03:17 編集

それはエラーではなくただの実行結果です。~~〇〇=(伏せ字伏せ字)ですかね？~~あとhtmlをちゃんと見てください。imgClick()ではなくimgClick('aaa.gif')のように私の方でコードを変更しています。

退会済みユーザー

2018/02/18 03:15

↑すみません、〇〇=以降消してくださいm__m

退会済みユーザー

2018/02/18 03:15

コード２ではきちんと表示されました！ありがとうございましたm__m

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

回答1件

ベストアンサー

とりあえず手っ取り早い方法としてはこうするといいと思います。

コードA↓

html
1<div class="sample1">
2  <a href="#" onclick="imgClick('aaa.gif');">
3    <img src="aaa.gif">
4  </a>
5</div>
6
7<div class="sample1">
8  <a href="#" onclick="imgClick('bbb.gif');">
9    <img src="bbb.gif">
10  </a>
11</div>
12
13<script>
14function imgClick(src) {
15  alert("http://○○.jp/"+src);
16}
17</script>

↓htmlとjsとで書く場所を分けてみた場合。まぁこういうことし始めるとキリがないのですが。

コードB↓

html
1<div class="sample1">
2  <img src="aaa.gif">
3</div>
4
5<div class="sample1">
6  <img src="bbb.gif">
7</div>
8
9<script>
10document.querySelectorAll(".sample1 img").forEach(function(elm){
11  elm.addEventListener("click",function(){
12    alert("http://○○.jp/"+this.getAttribute("src"));
13  });
14});
15</script>

ちなみに上記コードBは古いブラウザだと動かない可能性がありますが、特に気にしなくても大丈夫だとは思います。

追記 :

Edgeより前のIEでも動くようにするなら、コードBの<script>タグ内はこんな感じになりますね。(絶対htmlの要素にjs混ぜたくないマンなんでコードAよりもこっちの方が綺麗だと思う自分がいます。。)

↓コードC

js
1Array.prototype.forEach.call(
2  document.querySelectorAll(".sample1 img"),
3  function(elm){
4    elm.addEventListener("click",function(){
5      alert("http://○○.jp/"+this.getAttribute("src"));
6    });
7  }
8);