画像、文字の入れ替え

前提・実現したいこと

JSで画像の入れ替えのついでにその画像に対応させた文字の入れ替えをしたいのですぐまくいきません。
片方の入れ替えしかできないのでミスを教えてください。

該当のソースコード

html
1<script>
2function imgswap(){
3  var a, b, c;
4	var res=document.getElementById("result");
5
6c=window.document.images[0].src;
7window.document.images[0].src=window.document.images[1].src;
8window.document.images[1].src=c;
9
10 if (window.document.images[0]) {
11 	res.innerHTML="trick-or-treat";
12 }else if (window.document.images[1]) {
13 	res.innerHTML="lantern";
14 }
15}
16</script>
17</head>
18<body>
19	<div id="result">左右の画像を入れ替え</div>
20  <div><img src="cosplaymajo.png"><img src="lanterngirl.png"></div>
21<div>
22  <form name"myform">
23    <input type="button" value="入れ替え" onclick="imgswap()">
24  </form>

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

回答2件

ベストアンサー

srcのデフォルト値をとっておいて、クリック時点のsrcと比べてみては？

javascript
1function imgswap(){
2  var a, b, c;
3  var res=document.querySelector("#result");
4  a=document.querySelectorAll('img')[0];
5  b=document.querySelectorAll('img')[1];
6  c=a.getAttribute("src");
7  if(!a.dataset["default"]) a.dataset["default"]=c;
8  a.setAttribute("src",b.getAttribute("src"));
9  b.setAttribute("src",c);
10  if (a.getAttribute("src")==a.dataset["default"]) {
11    res.textContent="trick-or-treat";
12  }else{
13    res.textContent="lantern";
14  }
15}