前提・実現したいこと

ブラウザで画像を入れ替えたときに、AとBの二つの画像があったとして、Bが左側に来た時に「ワンワン」、Aが左側に来た時「ニャー」と文字が出るようにif文とid属性を使って作りたいです。使っているソフトはATOMです。

発生している問題・エラーメッセージ

ブラウザで「入れ替え」を押したとき画像は交互に入れ替わるのに、文字がずっと「ワンワン」のままで解決方法が分からず困っています。

該当のソースコード

<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>画像を入れ替え</title>
<script>
function imgswap() {
  var a, b, c;
  var ans=document.getElementById("answer");
  a=window.document.images[0].src;
  b=window.document.images[1].src;
  c=a;
  window.document.images[0].src=b;
  window.document.images[1].src=c;
  document.fgColor="#ffccff";

  if (window.document.images[0].src=b) {
    ans.innerHTML="ワンワン";
  } else if (window.document.images[1].src=c) {
    ans.innerHTML="ニャー";
  }
}
</script>
</head>
<body>
<p id="answer">左右の画像を入れ替え</p>
<div><img src="cat_tonkinese.png"><img src="dog_akitainu.png"></div>
<form name="myform">
<input type="button" value="入れ替え" onclick="imgswap()">
</form>
</body>
</html>

試したこと

ifの条件文をa=bやc=bにしたが変化なし、ずっと「ワンワン」のままであった。

###詳しい情報

画像の初期位置は左がAで右がBで、横で並んでます。文字は画像の上に最初は「左右の画像を入れ替え」と書いており、「入れ替え」を押すと「ワンワン」に変わります。

kei344

2020/01/08 04:31

（質問文は編集できます）質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

miyabi_pudding

2020/01/08 04:38

javascriptの質問タグも追加してください。

miyabi_pudding

2020/01/08 05:53

一点確認です。多分これ、Webサーバーとかではなく、ローカルでHTML開いてますね？

september

2020/01/08 06:01

そうです

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

回答2件

ベストアンサー

何点か基本的な部分を理解されていないようにお見受けします。

`=`一つは比較演算ではない

=は一つでは、比較演算ではなく、代入演算です。
よって、ifの一つ目の条件は、代入の結果が評価されるため、"今回の場合は"永久にtrueとなります。
（"ニャー"は永久に通りません）

一個目のimg要素のsrcにbを代入した後に`img[0].src == b`しても、そりゃ永久に`true`になる。

つまり、bをすでに代入して入れ替えた後に、代入したsrcと、bを比較したら、それは、falseになることはありえません。
なので、srcにdogが含まれているかどうか、で比較するなど、他の方法で比較する必要があるでしょう。

上記を踏まえて、下記でいかがでしょうか。
（修正点なども記載してます）

javascript
1function imgswap() {
2  var a, b, c;
3  var ans=document.getElementById("answer");
4  a = window.document.images[0].src;
5  b = window.document.images[1].src;
6  c = a;
7
8
9  window.document.images[0].src=b;
10  window.document.images[1].src=c;
11  document.fgColor="#ffccff";
12
13  // =が一個だと、比較ではなく、代入になってしまうので、今回の場合は永久に"ワンワン"の方を通る
14  // 左辺と右辺の比較演算子は、==
15  if (window.document.images[0].src==b) {
16    ans.innerHTML="ワンワン";
17  } else if (window.document.images[1].src==c) {
18    ans.innerHTML="ニャー";
19  }
20  // だが、上記（window.document.images[0].src=b;）ですでに、bを代入しているので、永久に"ワンワン"の方を通る
21  // なので、下記のようにsrcに含まれる文字列で比較するしかない
22  if (window.document.images[0].src.indexOf('dog') !== -1) {
23    // dogがパスに含まれる
24    ans.innerHTML="ワンワン";
25  } else {
26    // dogが含まれない、つまりcat
27    ans.innerHTML="ニャー";
28  }
29  
30}