How to Change Input Value in JavaScript
This short tutorial will discuss the utilization of the addEventListener in JavaScript.
the input Event in JavaScript
The input event is associated with the following types of HTML elements.
- Input type - text fields, radio, and checkbox
- Text area type
- Dropdown or Select type
Whenever a value changes of such an element, it will fire the input event. There is a significant difference between the input and change events where the input event triggers every time the element value changes, but the change event will only fire if the element loses its focus.
In addition, the event interface associated with the input and text area elements is the InputEvenet. For the other element types, it would be the generic Event interface.
the Input Event With JavaScript Event Listener
Upon user interaction, an event might be fired on the target. Web API allows registering event listeners where a function will be called upon a specified event fired on a target element.
The following is the basic syntax to register an event listener for an input type event.
Syntax:
addEventListener(event_type, listener);
The event_type parameter is the event type as a string representation. In this scenario, the event type would be the input.
The listener is the JavaScript function to be called upon an event is fired. This function or object receives notification immediately when the specified event has been triggered.
Let’s create a simple HTML page with input and paragraph elements, as shown in the following.
Code - HTML:
<html>
<head>
</head>
<body>
<input placeholder="your name" name="name"/>
<p id="nameList"></p>
<script type="text/javascript" src="inputev.js"></script>
</body>
</html>
We have also linked the inputev.js JavaScript file to the HTML page. Let’s use JavaScript logic to register an event listener for the input element.
Code - inputev.js:
// make the link to the element objects
const inputField = document.querySelector('input');
const displayAreaField = document.getElementById('nameList');
// adding the event listener for input event type
inputField.addEventListener('input', addNames);
// addNames is the function to be called
function addNames(inputevent) {
displayAreaField.textContent = inputevent.target.value;
}
As per the above example, we registered an event listener for the input field and passed the function to be called upon when an event is fired. In this case, the call back function is addNames.
When you run the example code, the typed letters appear below the text field.
The mentioned input event and the event listener techniques are useful features that the web API offers in highly interactive applications.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.