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

Question

I am trying to change button text and style when clicking on button. Code is working when changing Generate to Reset button however it doesn't work from reset to generate. It seems that code is working just in first click. How can I fix this?

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

In if statements, you need to have == instead of equals. So in your case it needs to be:

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

This article explains it pretty well.

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

try this..

you should use textContent instead of innerHtml .. it will give you text from html tag .. use includes method to compare text ..

Search it on 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>