jQuery: How to change text button on a

Question

Heelo, I know it seems to be a stupid question, but it makes me crazy

I have some buttons in my page

<ul class="nav navbar-nav">
    <li><button type="button" id="start" class="btn btn-default navbar-btn">Start</button></li>
    <li><button type="button" id="pause" class="btn btn-default navbar-btn" disabled="disabled"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span> Pause</button></li>
    <li><button type="button" id="play" class="btn btn-default navbar-btn" disabled="disabled"><span class="glyphicon glyphicon-play" aria-hidden="true"></span> Play</button></li>
    <li><button type="button" id="finish" class="btn btn-default navbar-btn" disabled="disabled"><span class="glyphicon glyphicon-eject" aria-hidden="true"></span> Close</button></li>
</ul>

Now I want to dynamically use jQuery to change one button text; for example I need to change the "Start" text. I tried the following code without success:

$("#start").text = "Open PHASE";

May be you were thinking of `$("#start")[0].textContent = "Open PHASE";` — PeterKA, Nov 12 '15 at 18:17

score 3 · Accepted Answer · answered Nov 12 '15 at 18:12

jQuery's .text() is a method. (You can see the documentation here)

This means that to set the text, you have to pass it a parameter, (the text you want to change it to)

$("#start").text("Open PHASE");

If you don't pass it anything, like $("#start").text();, it will return the current text of the element, which you can store in a variable and use later, like such

var text = $("#start").text();

score 1 · Answer 2 · answered Nov 12 '15 at 18:13

1

text is a function, not a property. You need to use:

$("#start").text("Open PHASE");

For more info see, read the jQuery documentation.

answered Nov 12 '15 at 18:13

tbrisker

15,518
1
16
17

score 0 · Answer 3 · answered Nov 12 '15 at 18:13

0

It's .text() you're after -

$("#start").text("Open PHASE");

answered Nov 12 '15 at 18:13

John C

3,052
3
34
47

score 0 · Answer 4 · answered Nov 12 '15 at 18:16

0

You are using it wrong its .text()

$("#start").text("Open PHASE");

answered Nov 12 '15 at 18:16

r007

305
1
2
17

score 0 · Answer 5 · answered Nov 12 '15 at 18:26

Is this what you're looking for?

$('#start').on('click', function() {
    var txt = $(this).text();
    $(this).text( txt == 'Start' ? 'Open PHASE' : 'Start' );
});

$('#start').on('click', function() {
    var txt = $(this).text();
    $(this).text( txt == 'Start' ? 'Open PHASE' : 'Start' );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
    <li><button type="button" id="start" class="btn btn-default navbar-btn">Start</button></li>
    <li><button type="button" id="pause" class="btn btn-default navbar-btn" disabled="disabled"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span> Pause</button></li>
    <li><button type="button" id="play" class="btn btn-default navbar-btn" disabled="disabled"><span class="glyphicon glyphicon-play" aria-hidden="true"></span> Play</button></li>
    <li><button type="button" id="finish" class="btn btn-default navbar-btn" disabled="disabled"><span class="glyphicon glyphicon-eject" aria-hidden="true"></span> Close</button></li>
</ul>

jQuery: How to change text button on a tag

5 Answers5

jQuery: How to change text button on a