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;
});

Update

This code changes the button from "Connect" to "Forget" but you need to click the button twice for some reason, and if you click the button again the state of the button doesn't return to "Connect". The "onclick" HTML attribute is also needed, not sure why.

<button type="button" class="buttonOne" onclick="myFunction2();">Connect</button>

<script>

function myFunction2(){
    const $ = document.querySelector.bind(document);

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

            }
            
            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;
    });
    }
</script>

Update 2

Thanks to @John Ronald' comment (@mplungjan's answer) I wrote the following code that works:

const $ = document.querySelector.bind(document);

let clickedOne = false;
let clickedTwo = false;
let clickedThree = false;
$(".buttonOne").addEventListener("click", (e) => {
  // When method executes it means the button has been clicked      
  if (clickedOne) {
    // When unclicked change button label to "Connect"
    e.target.innerText = "Connect";
  } else {
    // When first clicked change button label to "Forget"
    e.target.innerText = "Forget";

  }

  clickedOne = !clickedOne;
});

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

  clickedTwo = !clickedTwo;
});

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

  clickedThree = !clickedThree;
});

<button class="buttonOne">Connect</button>
<button class="buttonTwo">Connect</button>
<button class="buttonThree">Connect</button>

Update 3

The buttons in my HTML document contained an anchor element with an empty href attribute value (<a href="">) which caused the button to flash the label "Forget" when clicked, instead of the button being toggled to "Forget" until it was clicked again. This is why when using the JavaScript code in Update 2 the button was not toggled when clicked.

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>

Answer 2

You could declare 3 global variables for each button. It should look something like this:

let clicked1 = false;
let clicked2 = false;
let clicked3 = false;

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

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

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