时间戳

首页 > 解决方案 > 多次单击按钮时如何更改inner.HTML

javascript - 多次单击按钮时如何更改inner.HTML

问题描述

单击按钮时，我正在尝试更改按钮文本和样式。将“生成”按钮更改为“重置”按钮时代码有效，但从“重置”到“生成”无效。似乎代码只是在第一次点击时才起作用。我怎样才能解决这个问题？

// Change Generate Button to Reset#
let generateBtn = document.getElementById("generateBtn");

generateBtn.addEventListener("click", () => {
  if ((generateBtn.innerHTML = "GENERATE")) {
    generateBtn.innerHTML = "RESET";
    generateBtn.classList.add("resetBtn-shown");
  } else {
    generateBtn.innerHTML = "GENERATE";
    generateBtn.classList.remove("resetBtn-shown");
  }
});
.generateBtn-shown {
  background-color: red;
  color: #eba341;
  font-size: 1.5rem;
  font-weight: 500;
  border-radius: 0.5rem;
  width: 10rem;
  height: 3rem;
  border: none;
}

.resetBtn-shown {
  background-color: #21b884;
  color: white;
}
<button id="generateBtn" class="generateBtn-shown">GENERATE</button>

标签： javascripthtmlcssbuttonclick

解决方案

在if语句中，您需要有==而不是等于。所以在你的情况下，它需要是：

if ((generateBtn.innerHTML == "GENERATE")) {

这篇文章很好地解释了它。

// Change Generate Button to Reset#
let generateBtn = document.getElementById("generateBtn");

generateBtn.addEventListener("click", () => {
  if ((generateBtn.innerHTML == "GENERATE")) {
    generateBtn.innerHTML = "RESET";
    generateBtn.classList.add("resetBtn-shown");
  } else {
    generateBtn.innerHTML = "GENERATE";
    generateBtn.classList.remove("resetBtn-shown");
  }
});
.generateBtn-shown {
  background-color: red;
  color: #eba341;
  font-size: 1.5rem;
  font-weight: 500;
  border-radius: 0.5rem;
  width: 10rem;
  height: 3rem;
  border: none;
}

.resetBtn-shown {
  background-color: #21b884;
  color: white;
}
<button id="generateBtn" class="generateBtn-shown">GENERATE</button>

推荐阅读