JavaScript getElementById() and getElementByName()
Examples
1. Here’s a very simple HTML + JavaScript example where the user enters two numbers,
clicks a button, and the sum is displayed.
<!DOCTYPE html>
<html>
<body>
<h2>Add Two Numbers</h2>
<!-- Input fields -->
<input type="number" id="num1" placeholder="Enter first number">
<input type="number" id="num2" placeholder="Enter second number">
<!-- Button to trigger addition -->
<button onclick="addNumbers()">Add</button>
<!-- Place to display the result -->
<p id="result"></p>
<script>
function addNumbers() {
// Get the values from inputs
let number1 = parseFloat([Link]("num1").value);
let number2 = parseFloat([Link]("num2").value);
// Calculate sum
let sum = number1 + number2;
// Display the result
[Link]("result").innerHTML = "Sum: " + sum;
}
</script>
</body>
</html>
How it works:
1. The user types two numbers into the input boxes.
2. When the Add button is clicked, the addNumbers() function runs.
3. [Link]() retrieves the values.
4. parseFloat() converts them from strings to numbers.
5. The sum is displayed in the <p> tag with id "result".
2. Here’s a simple example where we use getElementsByName() to take two numbers as
input and display their sum.
<!DOCTYPE html>
<html>
<body>
<h2>Add Two Numbers (Using getElementsByName)</h2>
<!-- Two input fields with the same name -->
<input type="number" name="number" placeholder="Enter first number">
<input type="number" name="number" placeholder="Enter second number">
<!-- Button to trigger addition -->
<button onclick="addNumbers()">Add</button>
<!-- Place to display the result -->
<p id="result"></p>
<script>
function addNumbers() {
// Get all elements with name="number"
let nums = [Link]("number");
// Convert values to numbers
let num1 = parseFloat(nums[0].value) || 0;
let num2 = parseFloat(nums[1].value) || 0;
// Calculate sum
let sum = num1 + num2;
// Display result
[Link]("result").innerHTML = "Sum: " + sum;
}
</script>
</body>
</html>
How it works:
1. Both <input> fields share the same name="number".
2. getElementsByName("number") returns a list (like an array) of both fields.
3. We access them with nums[0] and nums[1].
4. parseFloat() turns the string inputs into numbers, and we handle empty inputs
with || 0.
5. The result is displayed in the <p> tag with id "result".
If you want, I can also show a version where the sum updates automatically whenever
either number changes, so you don’t need to click a button. That would make
the getElementsByName() usage more dynamic.
3. Using getElementById()
getElementById() returns a single element whose id matches the given string.
Example:
<!DOCTYPE html>
<html>
<body>
<h1 id="title">Hello World</h1>
<button onclick="changeText()">Click Me</button>
<script>
function changeText() {
[Link]("title").innerHTML = "Text Changed!";
}
</script>
</body>
</html>
How it works:
• id="title" is unique in the page.
• [Link]("title") selects that <h1> element.
• .innerHTML changes its content.
4. Using getElementsByName()
getElementsByName() returns a NodeList (like an array) of all elements with the
given name attribute.
Example:
<!DOCTYPE html>
<html>
<body>
<p>Select your favorite fruit:</p>
<input type="radio" name="fruit" value="Apple"> Apple <br>
<input type="radio" name="fruit" value="Mango"> Mango <br>
<input type="radio" name="fruit" value="Banana"> Banana <br>
<button onclick="showSelected()">Show Selected</button>
<script>
function showSelected() {
let fruits = [Link]("fruit");
for (let i = 0; i < [Link]; i++) {
if (fruits[i].checked) {
alert("You selected: " + fruits[i].value);
}
}
}
</script>
</body>
</html>
How it works:
• All radio buttons have name="fruit".
• [Link]("fruit") returns a collection of all these inputs.
• We loop through them to find the one that’s checked.
5. Mixing both in one example
<!DOCTYPE html>
<html>
<body>
<h2 id="heading">Choose a language:</h2>
<input type="checkbox" name="lang" value="JavaScript"> JavaScript <br>
<input type="checkbox" name="lang" value="Python"> Python <br>
<input type="checkbox" name="lang" value="Java"> Java <br>
<button onclick="updateHeading()">Update Heading</button>
<script>
function updateHeading() {
let langs = [Link]("lang");
let selected = [];
for (let i = 0; i < [Link]; i++) {
if (langs[i].checked) {
[Link](langs[i].value);
}
}
[Link]("heading").innerHTML =
"You selected: " + ([Link] ? [Link](", ") :
"None");
}
</script>
</body>
</html>
How it works:
• getElementsByName("lang") gets all checkboxes.
• We collect checked ones into an array.
• getElementById("heading") updates the heading text.