Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How do you make a button that adds text in HTML \'input\'?
You can make a button that adds text to an HTML input field using JavaScript's document.getElementById() method and event listeners. This approach allows you to dynamically modify input values when users interact with buttons.
Basic HTML Structure
First, create the HTML elements - a button and an input field:
<button id="clickButton">Click to add text</button> <input id="textInput" type="text" placeholder="Text will appear here">
Example: Adding Text on Button Click
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Text to Input</title>
</head>
<body>
<button id="clickButton">Click to add "JavaScript" to input</button>
<br><br>
<input id="textInput" type="text" placeholder="Text will appear here">
<script>
document.getElementById("clickButton").addEventListener("click", function() {
document.getElementById("textInput").value += "JavaScript ";
});
</script>
</body>
</html>
How It Works
The code works by:
-
document.getElementById("clickButton")- selects the button element -
addEventListener("click", function)- attaches a click event listener -
document.getElementById("textInput").value- accesses the input field's value -
+=operator - appends new text to existing content
Alternative Approaches
You can also replace the text instead of appending it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Replace Text in Input</title>
</head>
<body>
<button id="replaceButton">Replace with "Hello World"</button>
<button id="clearButton">Clear Input</button>
<br><br>
<input id="textInput" type="text" placeholder="Click buttons above">
<script>
document.getElementById("replaceButton").addEventListener("click", function() {
document.getElementById("textInput").value = "Hello World";
});
document.getElementById("clearButton").addEventListener("click", function() {
document.getElementById("textInput").value = "";
});
</script>
</body>
</html>
Key Points
- Use
+=to append text to existing input content - Use
=to replace all text in the input field - Always ensure your HTML elements have unique IDs
- Event listeners provide better practice than inline onclick attributes
Conclusion
Creating buttons that add text to input fields is straightforward with JavaScript's DOM manipulation methods. Use getElementById() and event listeners to create interactive forms that respond to user actions.
Updated on: 2026-03-15T23:18:59+05:30
3K+ Views
Advertisements