How To Change The Text Of A Label Element Using JavaScript?

change the Text of a Label element using JavaScript

In this article, you will learn how to change the Text of a Label element using JavaScript by getting the element and setting it’s .value or .innerHTML attribute.

Change the text of a label element using JavaScript

Example (1) of HTML:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<label id="NameLabel" for="NameForm">Name</label><br>
	<input id="NameInput" type="text"><br>
	<label id="DescLabel" for="DescInput">Description</label><br>
	<textarea id="DescInput"></textarea><br>
	<button onclick="output()">Input</button>
	<p id="NameText"></p>
	<p id="DescText"></p>
</body>
</html>

Example (2) of HTML:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<p id="p1" class="p"></p>
	<p id="p2" class="p"></p>
	<p id="p3" class="p"></p>
	<p id="p4" class="p"></p>
	<button onclick="output()">Input</button>
</body>
</html>

Using JavaScript and the .innerHTML and .value attribute

The way if you don’t know much about JQuery, simply get the desired element and setting its .innerHTML or .value attribute.

To get the element, you use either the document.getElementById() or document.getElementsByClassName() function.

Though please note two things:

  • The value attribute only applies to input fields/controls (<input>, <textarea>), otherwise use .innerHTML
  • The .getElementById() function returns a single element with the specified id, while the .getElementsByClassName() returns an array of elements with the same class (or className as defined by JavaScript)

Code (1):

function output() {
	const name_input = document.getElementById("NameInput");
	const desc_input = document.getElementById("DescInput");
	const name_text = document.getElementById("NameText");
	const desc_text = document.getElementById("DescText");

	name_text.innerHTML = name_input.value;
	desc_text.innerHTML = desc_input.value;

	name_input.value = "Input Name";
	desc_input.value = "Input Description";
}

Output:





Code (2):

function output() {
	const p_elms = document.getElementsByClassName("p");
	for (var i = 0 ; i < p_elms.length ; i++) {
		const elm = p_elms[i];
		elm.innerHTML = "Text";
	}
}

Though please note that the .getElementsByClassName() function only returns an HTMLCollection class and not an array, so something like .forEach() and the of keyword does not work.

Output:

Using JQuery and the .html() and .val() function

JQuery is a JavaScript library that simplifies many JavaScript features like document traversal, animations, event listening and handling, attribute manipulation among other things. If you can, learn and use JQuery.

The solution to the problem will be the exact same as using regular JavaScript but is different in syntax. For example:

  • To get an element, you use $(id/class/tag) (i.e. a selector) in which an id starts with "#" and class starts with "."
  • The .html() function works as a replacement for both getting (no argument) and setting (with argument) the .innerHTML attribute
  • The .val() function works as a replacement for both getting (no argument) and setting (with argument) the .value attribute

Though do remember that you need to setup the library before you write in the code. Either download it here, or copy the line below into the <head>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Code (1):

$(document).ready(function() {
	$("#btn").click(function() {
		const name_input = $("#NameInput");
		const desc_input = $("#DescInput");
		const name_text = $("#NameText");
		const desc_text = $("#DescText");

    name_text.html(name_input.val());
  	desc_text.html(desc_input.val());
        
 	  name_input.val("Input Name");
  	desc_input.val("Input Description");
  });
});

Output:





Code (2):

$(document).ready(function() {
	$("#btn").click(function() {
    $(".p").html("Text");
  }
}

Output:

Summary

To change the text of a label element using JavaScript, you need to get the elements using .getElementById() or .getElementsByClassName() function, then set the text using either the .innerHTML or .value attribute. Though if you're using JQuery, you use the $() selector and the .html() and .val() for getting the element and setting the text respectively.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *