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

Question

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

// 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>

Answer 1

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

generateBtn.addEventListener("click", () => {
  if ((generateBtn.innerHTML === "GENERATE")) { //=== instead of =
    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>

Answer 2

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

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

This article 解释得很好。

// 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>

Answer 3

试试这个..

你应该使用 textContent 而不是 innerHtml .. 它会从 html 标签给你 text .. 使用 includes 方法来比较文本 ..

在 google 上搜索：innertext vs innerhtml vs textcontent ..

let generateBtn = document.getElementById("generateBtn");

generateBtn.addEventListener("click", (e) => {
  if (e.target.textContent.includes("GENERATE")) {
    e.target.innerText = "RESET";
    e.target.classList.add("resetBtn-shown");
  } else {
    e.target.innerText = "GENERATE";
    e.target.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>

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

How can I change inner.HTML when click on button multiple times

html

javascript

css

click

button