c# - Toggle a button using JavaScript in an ASP.NET Core MVC app

Question

I am trying to use JavaScript to toggle a button from the label "Connect" to the label "Forget" when clicked, and then toggle the button back to "Connect" when clicked again.

My code does not toggle the button like I expect it to. The code is in a view template (.cshtml) file in an ASP.NET Core MVC app. I am also open to answers that use JQuery to achieve my goal.

HTML:

<button type="button" class="buttonOne">Connect</button>

Code:

const $ = document.querySelector.bind(document);
$(".buttonOne").addEventListener("click", (e) => {
  let clicked = false;
  if (clicked) {
    e.target.innerText = "Forget";
  } else {
    e.target.innerText = "Connect";
  }
  clicked = !clicked;
});

$(".buttonTwo").addEventListener("click", (e) => {
  let clicked = false;
  if (clicked) {
    e.target.innerText = "Forget";
  } else {
    e.target.innerText = "Connect";
  }
  clicked = !clicked;
});

$(".buttonThree").addEventListener("click", (e) => {
  let clicked = false;
  if (clicked) {
    e.target.innerText = "Forget";
  } else {
    e.target.innerText = "Connect";
  }
  clicked = !clicked;
});

question from:https://stackoverflow.com/questions/65845056/toggle-a-button-using-javascript-in-an-asp-net-core-mvc-app

Answer 1

Your let clicked = false; in the beginning of the function will thwart your attempts every time.

If you set it to false at the beginning of the function it is false until you flip it to true. Next time you click, it is set to false before you test it.

I suggest you delegate. Change the class to ID and the class to button

Then delegate from a container

The test is the text on the button - no need for a clicked var now If you are going to have different languages, use a data-attribute on the button instead of some global boolean

document.getElementById("buttonContainer").addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("button")) {
    const text = tgt.textContent;
    console.log("Clicked",tgt.id,"to",text)
    tgt.textContent = text === "Forget" ? "Connect" : "Forget"
  }
});

<div id="buttonContainer">
  <button id="buttonOne" class="button">Connect</button>
  <button id="buttonTwo" class="button">Connect</button>
  <button id="buttonThree" class="button">Connect</button>
</div>