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 (orclassNameas 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 anidstarts with"#"andclassstarts with"." - The
.html()function works as a replacement for both getting (no argument) and setting (with argument) the.innerHTMLattribute - The
.val()function works as a replacement for both getting (no argument) and setting (with argument) the.valueattribute
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:
- Get an Element by Name attribute using JavaScript
- Add a class to the Body element using JavaScript
- Add Line breaks to a Textarea using JavaScript
- Get the Value/Text of Select or Dropdown on Change using JS
Hello, my name is Davis Cole. I love learning and sharing knowledge about programming languages. Some of my strengths are Java, HTML, CSS, JavaScript, C#,… I believe my articles about them will help you a lot.
Programming Languages: Java, HTML, CSS, JavaScript, C#, ASP.NET, SQL, PHP
