Javascript: Change button text change after click

Question

I have a simple question about changing the text of a button after the user clicks it.

I would like the button click to cause the text to toggle between two values: "More" and "Less". Note that before the first click, it must have the value "More" and after the click the value "Less":

<button class="btn btn-primary" type="button"  data-toggle="collapse" data-target="#collapseExample"  aria-expanded="false" aria-controls="collapseExample">
  More
</button>

<div class="collapse" id="collapseExample">
  <p>Test</p>
</div>

Possible duplicate of link

M_M
– M_M

2019-02-06 22:54:46 +00:00
Commented Feb 6, 2019 at 22:54 — M_M
– M_M, Commented Feb 6, 2019 at 22:54

Henfs · Accepted Answer · 2020-03-25 16:25:22Z

2

Basically, you could add an onclick event to the button referencing to a function:

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" onclick="changeText()">
  More
</button>

Then, you prepare the function to change the text:

function changeText () {
  if (this.innerText == "More") { // check if text inside is "More"
    this.innerText == "Less";    // If so, change to "Less"
  } else {
    this.innerText == "More";
  }
}

edited Mar 25, 2020 at 16:25

answered Feb 6, 2019 at 22:55

Henfs

5,45912 gold badges33 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dacre Denny · Accepted Answer · 2019-02-06 22:54:55Z

This can be achieved using vanilla javascript via the following:

/*
Fetch the buttom element
*/
const button = document.body.querySelector('[data-target="#collapseExample"]');

/*
Add click event listener where we will provide logic that updates the button text
*/
button.addEventListener('click', function() {
  
  /*
  Update the text of the button to toggle beween "More" and "Less" when clicked
  */
  if(button.innerText.toLowerCase() === 'less') {
    button.innerText = 'More';
  }
  else {
    button.innerText = 'Less';
  }
});

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
More
</button>

<div class="collapse" id="collapseExample">
   <p>Test</p>
</div>

Collectives™ on Stack Overflow

Javascript: Change button text change after click

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related