JavaScript getElementById() with HTML Control – Simple Example with Result
What is getElementById()?
getElementById() is a JavaScript method used to access an HTML element by its id.
Syntax:
document.getElementById("elementId");
-
document→ Represents the HTML document. -
getElementById()→ Finds an element using itsid. -
"elementId"→ The id of the HTML element.
Example 1: Change Text
HTML + JavaScript
<!DOCTYPE html>
<html>
<head>
<title>getElementById Example</title>
</head>
<body>
<h2 id="heading">Welcome to NRsolution4u</h2>
<button onclick="changeText()">Click Here</button>
<script>
function changeText()
{
document.getElementById("heading").innerHTML = "Welcome to JavaScript!";
}
</script>
</body>
</html>
Result
Before Clicking
Welcome to NRsolution4u
[Click Here]
After Clicking
Welcome to JavaScript!
[Click Here]
Example 2: Read Value from TextBox
<!DOCTYPE html>
<html>
<head>
<title>Textbox Example</title>
</head>
<body>
Name :
<input type="text" id="txtName">
<button onclick="showName()">Show Name</button>
<p id="result"></p>
<script>
function showName()
{
var name = document.getElementById("txtName").value;
document.getElementById("result").innerHTML =
"Your Name is : " + name;
}
</script>
</body>
</html>
Result
If the user types
Nilesh Gupta
and clicks Show Name, the output will be
Your Name is : Nilesh Gupta
Example 3: Change Background Color
<!DOCTYPE html>
<html>
<head>
<title>Color Example</title>
</head>
<body>
<div id="box" style="width:200px;height:100px;background:lightgray;">
</div>
<br>
<button onclick="changeColor()">Change Color</button>
<script>
function changeColor()
{
document.getElementById("box").style.backgroundColor = "orange";
}
</script>
</body>
</html>
Result
Before
+----------------------+
| |
| Gray Box |
| |
+----------------------+
[Change Color]
After Clicking
+----------------------+
| |
| Orange Box |
| |
+----------------------+
Example 4: Enable/Disable Button
<!DOCTYPE html>
<html>
<head>
<title>Button Example</title>
</head>
<body>
<button id="btnSave">Save</button>
<button onclick="disableButton()">Disable Save Button</button>
<script>
function disableButton()
{
document.getElementById("btnSave").disabled = true;
}
</script>
</body>
</html>
Result
Before
[Save]
[Disable Save Button]
After Clicking
[Save] (Disabled)
[Disable Save Button]
Example 5: Show Selected Option from DropDown
<!DOCTYPE html>
<html>
<head>
<title>Dropdown Example</title>
</head>
<body>
<select id="course">
<option>Java</option>
<option>Python</option>
<option>JavaScript</option>
<option>C#</option>
</select>
<button onclick="showCourse()">Show Course</button>
<p id="output"></p>
<script>
function showCourse()
{
var course = document.getElementById("course").value;
document.getElementById("output").innerHTML =
"Selected Course : " + course;
}
</script>
</body>
</html>
Result
If the selected option is
Python
After clicking Show Course
Selected Course : Python
Common Properties Used with getElementById()
| Property | Description | Example |
|---|---|---|
innerHTML | Change HTML content | element.innerHTML = "Hello"; |
value | Get or set textbox value | element.value |
style.color | Change text color | element.style.color = "red"; |
style.backgroundColor | Change background color | element.style.backgroundColor = "yellow"; |
disabled | Enable or disable control | element.disabled = true; |
src | Change image source | element.src = "image.jpg"; |
Summary
document.getElementById() allows you to access and manipulate HTML elements by their unique id. It is commonly used to:
-
Read user input from text boxes (
value) -
Change text or HTML (
innerHTML) -
Modify CSS styles (
style) -
Enable or disable controls (
disabled) -
Change images (
src) - Work with dropdowns, buttons, checkboxes, and other HTML elements
It is one of the most fundamental and frequently used methods in JavaScript for interacting with web pages.
