多次单击按钮时如何更改 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

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

Answer 2

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

尝试这个..

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

在谷歌上搜索：innertextvs innerhtmlvs 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>