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 a 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.

Using innerText
<!DOCTYPE html>
<html>
<head>
    <title>Using innerText</title>
</head>

<body>
    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>
</body>
<script>
    function changeLabel() {
        let lbl = document.getElementById('lblEmp');
        let empName = document.getElementById('emp').value;

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

Using innerHTML

<!DOCTYPE html>
<html>
<head>
    <title>Using innerHTML</title>
</head>

<body>
    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>
</body>
<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>
</html>
Try it

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 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.

<!DOCTYPE html>
<html>
<head>
    <title>Using jQuery html() Method</title>
    <script src="https://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>
<script>
    $(document).ready(function () {
        $('#bt').click(function () {
            let empName = $('#emp').val();
            $('#lblEmp').html('Hello <span style="text-transform:capitalize;">' + empName + '</span>');
        });
    });
</script>
</html>
Try it

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.

<!DOCTYPE html>
<html>
<head>
    <title>Using jQuery text() Method</title>
    <script src="https://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>
<script>
    $(document).ready(function () {
        $('#bt').click(function () {
            let empName = $('#emp').val();
            $('#lblEmp').text('Hello ' + empName);
        });
    });
</script>
</html>
Try it

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!