Change Label Text on Button Click using JavaScript or jQuery

There are many ways you can change the text of an element dynamically using a small script at the client side. I am sharing two different examples here in this post showing how to change the text of a label on button click using JavaScript or jQuery.

To change the label text I need a value. Since I want to change the label text on button click, I’ll add a button on my webpage. The click events are used differently in both JavaScript and jQuery.

I also have a textbox (input type text) control, which will provide the value for the label.

Change Label Text on Button Click using JavaScript

The first example is in JavaScript, where I am using two different properties to change the text of a label. The properties are innerText and innerHTML. You can learn the difference between the two properties here.

I said I have button and a textbox on my web page. The button’s click event will call a function. In that function I’ll get the value from the textbox and assign the value the label using the properties I have mentioned above.

The Markup
Enter a Name: <input type="text" id="emp" value="" />
<p>
    <input type="button" id="bt" value="Change Label Text" onclick="changeLabel()" />
</p>
<label id="lblEmp">N/A</label>
The Script

Using innerText

<script>
    function changeLabel() {
        let lbl = document.getElementById('lblEmp');
        let empName = document.getElementById('emp').value;

        lbl.innerText = empName;       // TREATS EVERY CONTENT AS TEXT.
    }
</script>

Using innerHTML

<script>
    function changeLabel() {
        let lbl = document.getElementById('lblEmp');
        let empName = document.getElementById('emp').value;

        // Assign HTML codes along with text values using innerHTML.
        lbl.innerHTML = 'Hello <span style="text-transform:capitalize;">' + empName + '</span>';
    }
</script>

Read more about innerHTML and innerText

Change Label Text on Button Click using jQuery

jQuery too provides two separate methods to assign or change an element’s text. The methods are html() and text(). The function of the methods are quite similar to the JavaScript properties that I have explained in the above section.

The Markup
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
    Enter a Name: <input type="text" id="emp" value="" />
    <p>
        <input type="button" id="bt" value="Change Label Text" />
    </p>
    <label id="lblEmp">N/A</label>
</body>
The jQuery Script

Using html() Method

Use the html() method in jQuery when you want to add HTML code along with the content or a text value. Here, I have added a <span> element to transform the value that I’ll get from the textbox. You can add any HTML code using the html() method.

<script>
    $(document).ready(function () {
        $('#bt').click(function () {
            let empName = $('#emp').val();
            $('#lblEmp').html('Hello <span style="text-transform:capitalize;">' + empName + '</span>');
        });
    });
</script>

Using text() Method

Use the text() method when you want the add simple text values (numbers, strings etc.). However, if you add HTML codes to the text() method, it will treat the markup as string values.

<script>
    $(document).ready(function () {
        $('#bt').click(function () {
            let empName = $('#emp').val();
            $('#lblEmp').text('Hello ' + empName);
        });
    });
</script>

Well, that’s it. Thanks for reading.

Previous - How to Remove Duplicates in a JavaScript Array using ES6 Set and from() Function



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Google+

Related Posts:

Join our Google Plus Community and be a part of a discussion!