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.

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Event Listeners JS</title>
 </head>

 <body>
   <button>Click Me</button>

   <script>
     document.querySelector("button").addEventListener("click", (e) => {
       e.target.textContent = "I was clicked"; //Changes click me to I was
     });
   </script>
 </body>
</html>

Simply if on the textContent to know what to change it to. Granted you need to preserve what it originally was to be able to change it back. That could be done with a dataset property though — Taplar
– Taplar, Commented Aug 5, 2020 at 16:36
Curly Braces { } are used to group statements. So if you need to execute only 1 statement you don't need them. Otherwise if you need to associate multiple statements with if....else, for, while, ... you have to add curly braces around those statements. — gpl
– gpl, Commented Aug 5, 2020 at 16:50

Elna Haim · Accepted Answer · 2020-08-05 16:55:29Z

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:

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Event Listeners JS</title>
 </head>

 <body>
   <button>Click Me</button>

   <script>
     document.querySelector("button").addEventListener("click", (e) => {
       //checking the text content in the button if its Click Me
       if(e.target.textContent === 'Click Me'){
       e.target.textContent = "I was clicked"; //Changes click me to I was
         //if its not Click Me it will change back to Click Me
         } else {
           e.target.textContent = "Click Me"; //change back to Click Me
         }
     });
   </script>
 </body>
</html>

VL93 · Accepted Answer · 2020-08-05 16:43:02Z

1

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";

         }
     });

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Event Listeners JS</title>
 </head>

 <body>
   <button>Click Me</button>

 </body>
</html>

answered Aug 5, 2020 at 16:43

VL93

793 bronze badges

Comments

Sascha A. · Accepted Answer · 2020-08-05 16:47:05Z

1

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

<button>Click Me</button>

answered Aug 5, 2020 at 16:47

Sascha A.

4,6463 gold badges17 silver badges34 bronze badges

Comments

dave · Accepted Answer · 2020-08-05 16:47:12Z

1

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

<button>Click Me</button>

edited Aug 5, 2020 at 16:47

answered Aug 5, 2020 at 16:41

dave

65.1k6 gold badges81 silver badges98 bronze badges

Comments

Dharman · Accepted Answer · 2020-08-05 16:50:41Z

1

check out this code:

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Event Listeners JS</title>
 </head>

 <body>
   <button>Click Me</button>

   <script>
     document.querySelector("button").addEventListener("click", (e) => {
        if(e.target.textContent == "Click Me")
            e.target.textContent = "I was clicked"; //Changes click me to I was
        else
            e.target.textContent = "Click Me"; //Changes click me to I was
     });
   </script>
 </body>
</html>

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.

edited Aug 5, 2020 at 16:50

Dharman♦

33.9k27 gold badges105 silver badges157 bronze badges

answered Aug 5, 2020 at 16:45

gpl

1,5112 gold badges11 silver badges26 bronze badges

Collectives™ on Stack Overflow

changing the text of a button using javascript event listener

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related