How to change button text or link text in JavaScript?

Question

I have this HTML button:

<button id="myButton" onClick="lock(); toggleText(this.id);">Lock</button>

And this is my toggleText JavaScript function:

function toggleText(button_id) 
{
   if (document.getElementById('button_id').text == "Lock") 
   {
       document.getElementById('button_id').text = "Unlock";
   }
   else 
   {
     document.getElementById('button_id').text = "Lock";
   }
}

As far as I know, button text (<button id="myButton">Lock</button>) is just like any link text
(<a href="#">Lock</a>). So the fact that it's a button doesn't matter. However, I can't access the button text and change it.

I tried ('button_id'), (button_id), == "Lock", == 'Lock', but nothing works.

How can I access and change a button text (not value) or a link text?

I Hate Lazy · Accepted Answer · 2012-10-01 19:54:09Z

68

Change .text to .textContent to get/set the text content.

Or since you're dealing with a single text node, use .firstChild.data in the same manner.

Also, let's make sensible use of a variable, and enjoy some code reduction and eliminate redundant DOM selection by caching the result of getElementById.

function toggleText(button_id) 
{
   var el = document.getElementById(button_id);
   if (el.firstChild.data == "Lock") 
   {
       el.firstChild.data = "Unlock";
   }
   else 
   {
     el.firstChild.data = "Lock";
   }
}

Or even more compact like this:

function toggleText(button_id)  {
   var text = document.getElementById(button_id).firstChild;
   text.data = text.data == "Lock" ? "Unlock" : "Lock";
}

edited Oct 1, 2012 at 19:54

answered Oct 1, 2012 at 19:36

I Hate Lazy

49k13 gold badges89 silver badges79 bronze badges

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

2 Comments

tempy Over a year ago

Whats the advantages of using the .firstChild.data?

I Hate Lazy Over a year ago

@tempy: It's very fast, and cross browser compatible. People use .innerHTML because the DOM standard .textContent isn't implemented in some browsers, especially older IE. But .innerHTML is an HTML parser, so it's a bit of a hackish way to go. Working directly with the text node is very clean.

elclanrs · Accepted Answer · 2012-10-01 19:51:33Z

29

document.getElementById(button_id).innerHTML = 'Lock';

edited Oct 1, 2012 at 19:51

answered Oct 1, 2012 at 19:35

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

5 Comments

tempy Over a year ago

It's not working. Maybe I have another mistake in my function?

Cal McLean Over a year ago

Don't put quotes around the button_id.

tempy Over a year ago

Is there any difference between .innerHTML and .textContent as suggested by user1689607? They both work.

elclanrs Over a year ago

innerHTML lets you add HTML tags while textContent will only work with text nodes AFAIK

elclanrs Over a year ago

@Callum McLean: Nice catch, just noticed what you meant, I edited the answer.

Cal McLean · Accepted Answer · 2012-10-01 19:40:39Z

5

You can simply use:

document.getElementById(button_id).innerText = 'Your text here';

If you want to use HTML formatting, use the innerHTML property instead.

answered Oct 1, 2012 at 19:40

Cal McLean

1,4388 silver badges15 bronze badges

Comments

Anoop · Accepted Answer · 2012-10-01 19:42:40Z

0

Remove Quote. and use innerText instead of text

function toggleText(button_id) 
{                      //-----\/ 'button_id' - > button_id
   if (document.getElementById(button_id).innerText == "Lock") 
   {
       document.getElementById(button_id).innerText = "Unlock";
   }
   else 
   {
     document.getElementById(button_id).innerText = "Lock";
   }
}

edited Oct 1, 2012 at 19:42

answered Oct 1, 2012 at 19:37

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

1 Comment

tempy Over a year ago

This + changing the .text solved my problem. So only removing the quote isn't enough. I also mentioned it in my question.

Collectives™ on Stack Overflow

How to change button text or link text in JavaScript?

4 Answers 4

2 Comments

5 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related