左右の画像と文字を入れ替えたい

前提・実現したいこと

左右（燃えるゴミと資源ゴミのイラスト）を「入れ替えボタン」を
押したときに、左に燃えるゴミ→「火曜日と木曜日」
左に資源ゴミ→「金曜日」
と出るようにしたいです。

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

文字が表示されない
画像は入れ替わっています

該当のソースコード

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="金曜日"
}
if(window.document.images[0].src.indexOf('燃えるゴミ') !== -1){
  ans.innerHTML="火曜日と木曜日";
} else{
  ans.innerHTML="金曜日";
}
}
</script>
</head>
<body>
<p>左右の画像を入れ替え</p>
<div><img src="もえるゴミ.png" id="d"><img src="資源ゴミ.png" id="e"></div>
<div><form name="myform"><input type="button" value="入れ替え" onclick="imgswap()"></form></div>
</body>
</html>

試したこと

他の方の質問を参考にしたが上手くいかなかったです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2021/01/10 22:29

Javaですか？ JavaScriptですか？この2者は似て非なるものです。タグ説明も読んでください。

CHIIII

2021/01/10 22:32

申し訳ありません。 JavaScriptです。

m.ts10806

2021/01/10 22:35

あと、コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

m.ts10806

2021/01/10 22:35

質問は編集できますので、適宜ご対応ください。（※指摘は怒りや責めではないです）

CHIIII

2021/01/10 22:46

ありがとうございます。初めて利用した者で、質問させていただく立場なのに上手く出来ておらず申し訳ありません。

m.ts10806

2021/01/10 22:47

いえあの、そういう反応は特になくて良いです。こちらは「質問への追記・修正の依頼」のコメント欄なので、指摘内容を加味して質問編集して返してもらえればそれで十分です。

m.ts10806

2021/01/10 22:48

お礼や謝罪などあっても問題は前に進まないので、欲しいのはフィードバックです。

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

回答1件

ベストアンサー

それぞれの機能がどういう結果を返しているのか確認すれば明白です。
（例が適当でなかったため削除しました）
「存在していない・定義されていない要素」を指定していれば動かないのは当然で、
機能を「正しく使えていない」場合は、エラーが出ている可能性もあります。
0. エラーを確認し、エラーを読むこと
0. ドキュメント（MDNなどで良い）で機能の確認をすること
0. デバッグをすること（想定の値がとれているか、想定の分岐を通っているか確認すること）

この3つを徹底すればロジック上に問題がなければおおよそ想定の動作はします。
見た感じ、「1. エラーを確認し、エラーを読むこと」からできてないです。

まず
var ans=document.getElementById("answer");
上記で、ansが想定の要素をとれているかどうか、から。
getElementById()ですから、名前から「指定したIDから要素情報を得る」という意味が分かるかと思います。
取れてなければ以降の処理への影響があると思って良いです。

投稿2021/01/10 23:30

編集2021/01/11 04:28

m.ts10806

総合スコア80892

kei344

2021/01/11 04:09

「存在していない」ことは無いです。（たぶん参考にしている資料が古代の資料）動くサンプル： https://jsfiddle.net/hqcdj6em/ （fgColor はbody要素にtext属性が生える）【document.images - Web API | MDN】 https://developer.mozilla.org/ja/docs/Web/API/Document/images 【Document.fgColor - Web API | MDN】 https://developer.mozilla.org/ja/docs/Web/API/Document/fgColor

m.ts10806

2021/01/11 04:11

書き方が悪かったかもしれません。「ちゃんと想定の値を取れてるか」「機能を分かって使ってるか」という確認をしてもらいたい意図がありました。

kei344

2021/01/11 04:21

「Aとか。「存在していない、定義されていない要素」を利用しようとしていれば」という日本語の問題について指摘しているつもりです。また、window.document.images については特に結果を確認することは無いと思います。（問題はそこじゃないので） https://jsfiddle.net/4a3qLzgb/

m.ts10806

2021/01/11 04:29

ご指摘ありがとうございます。例の部分は消しました。１個１個想定の値を取れてるか確認してほしい意図が伝わりにくかったですね。 >また、window.document.images については特に結果を確認することは無いと思います。現在の質問者の段階だとそれくらい慎重になってもいいかなとは思いました。なんとなく拾ってきたそれっぽいコードをなんとなく使ってる可能性がなくはないので。

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