How can I make button label dynamic using javascript?

Question

What I want to do is be able to change the text inside of a button by making the text inside an actual variable.

Something like this:

<button type=button>status</button>

but instead of a string, it's a variable:

var status = 'on';

score 13 · Answer 1 · edited Feb 22 '19 at 19:35

13

If you're trying to assign the text of a button to a variable then it's as simple as following:

var buttonText = "click me!";      
document.getElementById("id-of-your-button").innerHTML = buttonText;

edited Feb 22 '19 at 19:35

Reza

3,473
4
35
54

answered Dec 05 '12 at 07:15

trebuchet

1,483
9
14

or do you want it to "dynamically" change as the variable changes? – trebuchet Dec 05 '12 at 07:16
1

You typed "innner" instead of "inner". Just in case someone else end up copypasting the line. – devamat Nov 14 '18 at 10:49

Sudeep · Answer 2 · 2012-12-05T07:20:43.360

5

if you are using jquery, then its a simple task.

suppose you have a button

then you can use jquery to assing its text by using

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
var status="on";
$(document).ready(function(){
   $("#myButton").text(val);
});
</script>

or you could pure javascript:

var status="on";
document.getElementById('myButton').innerHTML=status;

edited Dec 05 '12 at 07:20

answered Dec 05 '12 at 07:06

Sudeep

109
7

1

he's asking to put var name as status he doesn't want to change text on button – Murali N Dec 05 '12 at 07:09

score 3 · Answer 3 · answered Dec 05 '12 at 07:22

Guess this helps:

    <button id="myButton" type="button" value=""></button>
    <input id="myInputButton" type="button" value=""></button>

    <script type="text/javascript">
        var status = 'on';
        document.getElementById('myButton').innerHTML = status;
        document.getElementById('myInputButton').value = status;
    </script>

How can I make button label dynamic using javascript?

3 Answers3