Aim: Program on the concept of changing the label in javascript
Greetings, I'm Ashwin Santosh Telmore, a passionate tech enthusiast on a mission to demystify the intricate world of technology. With a background in Computer Engineering and a flair for simplifying the complex, I'm here to share tech knowledge in the easiest and most accessible way.
Imagine having your own personal tech guide – that's where I come in! From exploring the wonders of the MERN stack to unraveling the magic behind web development, I'm here to make tech concepts like C++, JavaScript, and Python a walk in the park.
Navigating the dynamic realm of web technologies, I've mastered HTML, CSS (SASS), and JavaScript, empowering me to bring websites to life with interactivity. Let's embark on a journey through the ever-evolving tech landscape, making the intricate world of technology understandable for all.
Aim: Program on the concept of changing the label in javascript
Requirement :
- Working PC or Laptop ,
- Installed any operating system
- Any browser (Google Chrome)
- Any code Editor(VS Code)
Theory
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.
Given an HTML document and the task is to change the text of a label using JavaScript.
What is a label ? The tag is used to provide a usability improvement for mouse users i.e, if a user clicks on the text within the element, it toggles the control.
Example Change the label value of an option in a drop-down list:
document.getElementById("myOption").label = "newLabel";
Property Values
Description : Specifies a shorter version for the option
Technical Details
Return Value: A String, representing the label of the option in the drop-down list. If the label attribute is not specified, it will return the
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.,
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
.bg-salmon {
background-color: salmon;
}
</style>
<script>
function handleClicked(e) {
const label = document.getElementById('label');
const first_name = document.getElementById('first_name');
// ✅ Change (replace) the text of the label
label.textContent = 'Enter Last name?';
first_name.value = '';
}
</script>
</head>
<body>
<h1>Practical No 06</h1>
<div>
<label id="label" for="first_name">Enter first name?</label>
<input type="text" name="first_name" id="first_name" />
<button id="handleClick" onClick={handleClicked()}>Enter</button>
</div>
<!-- <script src="index.js"></script> -->
</body>
</html>
Conclusion: Finally, we can conclude that we have successfully programmed on the concept of changing the label in javascript.
