changing the text of a button using javascript event listener

Question

I have a simple button that when clicked, the text on the button will change using a event listener. However, I want to add some logic to the code so that when I click it again it just goes back to the original text. I am fairly new to javascript and trying to advance my skills.



 
   
   
   Event Listeners JS

user_12740967 · Answer

as @Taplar suggested :

EDIT: to make it even cleaner you can single line if statement:

document.querySelector("button").addEventListener("click", (e) => {

    (e.target.textContent === 'Click Me') ? e.target.textContent = "I was clicked" : e.target.textContent = "Click Me"

});

Older answer without single line if statement:



 
   
   
   Event Listeners JS

user_2082673 · Answer

If you want a more dynamic solution (no hardcoded values in the handler, it will automatically track what the original text was), you could do it like this:

const toggleTextOnClick = (text, el) => {
    let originalText = el.textContent;
    el.addEventListener("click", (e) => {
        e.target.textContent = text;
        [originalText, text] = [text, originalText];
    })
}

const btn = document.querySelector("button");
toggleTextOnClick("I was clicked", btn);

user_13659755 · Answer

The idea is this:

     document.querySelector("button").addEventListener("click", (e) => {
        let textContent = e.target.textContent;
        if (textContent == "Click Me") {
            e.target.textContent = "I was clicked";
         }
         else {
           e.target.textContent = "Click Me";

         }
     });



 
   
   
   Event Listeners JS

user_13828124 · Answer

check out this code:



 
   
   
   Event Listeners JS

I have added if...else block. Now if button's text is Click Me, statement under if gets executed otherwise statement under else get executed.

user_5324511 · Answer

document.querySelector("button").addEventListener("click", (e) => {
    let last = e.target.last;
    if (last) {
    e.target.last = e.target.textContent;
    e.target.textContent = last;
  } else {
    e.target.last = e.target.textContent;
    e.target.textContent = "I was clicked";
  }
});

changing the text of a button using javascript event listener

5 Answers