JS货币转换器交换按钮仅可点击一次生效问题排查

嘿，我一眼就看到了代码里的几个关键问题，正是这些小bug让你的交换按钮只能生效一次，咱们逐个解决：

1. 条件判断用了赋值而非比较 #

你在if和else if里写的是leftBtn.textContent = "EUR"——这里的=是赋值操作，不是比较！每次触发函数时，都会直接把"EUR"塞给leftBtn.textContent，导致条件永远为真，永远只会执行第一个分支，根本走不到else if里。

得改成比较运算符，推荐用严格相等===（类型和值都匹配，更严谨），还要加trim()去掉文本前后的空格——因为你的按钮里是"USD " + '<span...'，textContent会带个空格，直接比"USD"会不匹配：

if (leftBtn.textContent.trim() === "EUR") {
  // ...
} else if (leftBtn.textContent.trim() === "USD") {
  // ...
}

2. 第二个分支的文本设置写错了 #

看这个代码：

leftBtn.textContent = "EUR " + + '<span class="caret"></span>';

这里多了个多余的+号，变成了"EUR " + + '<span...'，会把字符串转成数字（结果是NaN），显示肯定不对。而且用textContent的话，<span>标签会被当成纯文本显示，不会变成下拉箭头，得和第一个分支一样用innerHTML。

修正后应该是：

leftBtn.innerHTML = "EUR " + '<span class="caret"></span>';
rightBtn.innerHTML = "USD " + '<span class="caret"></span>';

3. 图片路径的小细节 #

第二个分支里你写的是leftImg.src = "assets/img/eu-flag.png"，但第一个分支是rightImg.src = "assets/img/eu-flag.jpg"，后缀不一致，得确保和你实际的图片文件后缀匹配，不然图片会加载失败。

完整修正后的代码 #

var changeCurr = document.getElementById("swap-currency");
function swap() {
  var leftBtn = document.getElementById("konverter-btn-left");
  var rightBtn = document.getElementById("konverter-btn-right");
  var leftImg = document.getElementById("konverter-img-left");
  var rightImg = document.getElementById("konverter-img-right");
  
  // 用trim()处理空格，避免判断失效
  if (leftBtn.textContent.trim() === "EUR") {
    leftBtn.innerHTML = "USD " + '<span class="caret"></span>';
    rightBtn.innerHTML = "EUR " + '<span class="caret"></span>';
    leftImg.src = "assets/img/usa-flag.png";
    rightImg.src = "assets/img/eu-flag.jpg";
  } else if (leftBtn.textContent.trim() === "USD") {
    leftBtn.innerHTML = "EUR " + '<span class="caret"></span>';
    rightBtn.innerHTML = "USD " + '<span class="caret"></span>';
    leftImg.src = "assets/img/eu-flag.jpg"; // 和第一个分支统一后缀
    rightImg.src = "assets/img/usa-flag.png";
  }
}
changeCurr.addEventListener("click", swap);

额外优化小技巧 #

为了避免以后再遇到textContent受空格或HTML结构影响的问题，你可以给按钮加个自定义属性data-currency来存当前货币类型，这样判断起来更可靠：

比如按钮标签改成这样：

<button id="konverter-btn-left" data-currency="EUR">EUR <span class="caret"></span></button>
<button id="konverter-btn-right" data-currency="USD">USD <span class="caret"></span></button>

然后JS里换成：

function swap() {
  var leftBtn = document.getElementById("konverter-btn-left");
  var rightBtn = document.getElementById("konverter-btn-right");
  var leftImg = document.getElementById("konverter-img-left");
  var rightImg = document.getElementById("konverter-img-right");
  
  // 读取自定义属性里的货币类型
  var leftCurr = leftBtn.dataset.currency;
  var rightCurr = rightBtn.dataset.currency;
  
  // 先交换属性值
  leftBtn.dataset.currency = rightCurr;
  rightBtn.dataset.currency = leftCurr;
  
  // 再更新显示和图片
  if (leftCurr === "EUR") {
    leftBtn.innerHTML = "USD " + '<span class="caret"></span>';
    rightBtn.innerHTML = "EUR " + '<span class="caret"></span>';
    leftImg.src = "assets/img/usa-flag.png";
    rightImg.src = "assets/img/eu-flag.jpg";
  } else {
    leftBtn.innerHTML = "EUR " + '<span class="caret"></span>';
    rightBtn.innerHTML = "USD " + '<span class="caret"></span>';
    leftImg.src = "assets/img/eu-flag.jpg";
    rightImg.src = "assets/img/usa-flag.png";
  }
}

这样不管按钮文本里有没有空格或者HTML结构怎么变，判断都不会出错，更健壮~

内容的提问来源于stack exchange，提问作者darac06