Javascript - Change button text doesn't work

Question

I have the following piece of code I need in order to update a bootstrap button when a collapsed is opened or closed. However the icon part is updating but impossible to get the button text updated and I have no idea why.

My javascript level is very low and I'm simply using part of code I might find on SOF or anywhere else on internet.

Javascript

$('#more-properties').on('hidden.bs.collapse', function () {
  var icon = document.getElementById("icon-more-properties");
  icon.setAttribute('class', 'fas fa-angle-down pr-2');

  var btn = document.getElementById("btn-more-properties");
  btn.textContent('More properties');
});
$('#more-properties').on('shown.bs.collapse', function () {
  var icon = document.getElementById("icon-more-properties");
  icon.setAttribute('class', 'fas fa-angle-up pr-2');

  var btn = document.getElementById("btn-more-properties");
  btn.textContent('Less properties');
});

Bootstrap button

<div class="col-12 text-center" id="btn-div">
    <button class="btn btn-outline-dark shadow-none collapsed" id="btn-more-properties" type="button" data-toggle="collapse" data-target="#more-properties" style="border-radius: 0 !important;">
    <i id="icon-more-properties" class="fas fa-angle-down pr-2"></i>More properties</button>
</div>

Does anyone can tell me why it is not working ? I can't find any similar issue on iternet.

Thank you in advance for your help.

Does this link provide you an answer? w3schools.com/bootstrap4/… — userDuR
– userDuR, Commented Oct 1, 2021 at 10:16
Are you sure you don't have more than one element in the page with id="btn-more-properties"? If so, that is not allowed. id, at all times and cost, must be unique, per-document. — connexo
– connexo, Commented Oct 1, 2021 at 10:44

connexo · Accepted Answer · 2021-10-01 10:43:10Z

3

that textContent is not a function but a property, so instead of calling it you need to assign the value to it:

btn.textContent = 'Less properties';

Hope this helps 🔥

edited Oct 1, 2021 at 10:43

connexo

57.2k15 gold badges112 silver badges149 bronze badges

answered Oct 1, 2021 at 10:39

ezhupa99

2,33318 silver badges20 bronze badges

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

5 Comments

mbojko Over a year ago

BTW if you're already using jQuery, instead of getElementById and textContent you can simply $("#btn-more-properties").text("...").

connexo Over a year ago

@mbojko He's forced to use jQuery because those events are Bootstrap jQuery events. Replacing native API with jQuery in 2021 is definitely a downgrade.

Thomas Over a year ago

I just tried and indeed it is updating the text thank you, however the text replace also the icon. How should I do to keep it and update the text at the same time ? I was originally thinking about changing the whole html code inside the <div< by pre-writing it in the script and then apply '.html' ; '.innerHtml'vor other but it is simply not working as I expected.

ezhupa99 Over a year ago

I would suggest for you to wrap the button text on a span and manipulate the span textContent, i.e: <button {buttonProperties}><i {iconProperties}></icon><span>More Properties</span></button> and then from javascript you just get i.e: document.querySelector('#btn-more-properties span').textContent = 'whatever you like' and this way you wont overwrite the icon on button

Thomas Over a year ago

It worked perfectly thank you !

Collectives™ on Stack Overflow

Javascript - Change button text doesn't work

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related