How to identify different inputs with one onchange handler

In JavaScript, the onchange event is commonly used to execute a function when the value of an input element changes. Sometimes, we might have multiple input elements and want to use a single onchange handler to identify which input triggered the event. In this answer, we will learn how to achieve this using various techniques and gain a deeper understanding of handling multiple input elements efficiently.

Understanding the onchange event

The onchange event is a fundamental JavaScript event that triggers when the value of an input element changes and the element loses focus. Leveraging this event for multiple inputs offers a compact way to respond to user actions. A single handler can serve as the central control point rather than creating a separate event handler for each input.

How user input is handled
How user input is handled

Identifying different input types

Sometimes, we might have multiple input elements and want to use a single onchange handler to handle them. To do this, we can follow these steps:

Using event.target and data attributes

When handling multiple input elements with a single onchange handler, we can use event.target to directly access the changed input element, making it easy to retrieve its properties and values. Additionally, data attributes, which are custom attributes storing extra information in HTML elements, can be accessed using the getAttribute method within the handler, which is useful for making decisions based on specific data related to an input element.

function handleInputChange(event) {
  const changedInput = event.target;
  const inputType = changedInput.getAttribute("data-input-type");
  // You can use a custom data attribute to differentiate input elements
}
How to use event.target and data attributes

Using element IDs

HTML elements can have unique IDs, which makes them easily distinguishable. In this approach, we utilize event.target.id to obtain the ID of the modified input element. This is particularly useful when we need to perform distinct actions or logic based on the individual IDs of the input elements.

function handleInputChange(event) {
  const changedInputId = event.target.id;
  // You can use the ID to identify the specific input element
}
How to use event.target.id

Class-based approach

By assigning class names to our input elements based on their type or purpose, we can categorize and differentiate them effectively. Inside the onchange handler, we can determine which classes the modified input element possesses using classList.contains().

function handleInputChange(event) {
  const changedInput = event.target;
  if (changedInput.classList.contains("text-input")) {
    // Handle text input changes
  } else if (changedInput.classList.contains("checkbox-input")) {
    // Handle checkbox changes
  } else if (changedInput.classList.contains("color-input")) {
    // Handle color changes
  }
}
How to use class names

Code example

Let’s look at the code implementation of the above approaches:

Code explanation

  • Lines 1–7: The <!DOCTYPE html> declaration specifies the document type as HTML5. The <html> element is opened, and basic meta information, such as the character set and viewport settings, is specified within the <head> element. The page title is set to Identifying Different Inputs.

  • Lines 9–15: Three input elements are defined within the <body> element of the HTML document.

    • The first input is a text input with type="text", an id attribute of "textInput", a class attribute of "text-input", and a data-input-type attribute set to "text".

    • The second input is a checkbox input with type="checkbox", an id attribute of "checkboxInput", a class attribute of "checkbox-input", and a data-input-type attribute set to "checkbox".

    • The third input is a select drop-down with the id attribute of "selectInput", a class attribute of "select-input", and a data-input-type attribute set to "select". Within the <select> element, there are three <option> elements defining the selectable options.

  • Lines 18–45: The JavaScript code section begins. It defines the handleInputChange() function, which will be called when any of the input elements change. Within the function:

    • Line 21: The const changedInput = event.target; statement uses event.target to obtain the element that triggered the onchange event.

    • Line 22: The const dataInput = changedInput.getAttribute("data-input-type"); statement retrieves the value of the data-input-type attribute, which stores information about the input type.

    • Line 25: The const idInput = event.target.id; statement retrieves the id attribute of the changed input element.

    • Lines 28–37: We implement the class-based approach. It checks the classes of the changed input element to determine its type and assigns the result to the classInput variable. Depending on the class, it identifies whether the input is a "text-input", "checkbox-input", or "select-input".

    • Lines 40–44: The results are displayed in the output <div> element using document.getElementById('output').innerHTML.

Conclusion

In this answer, we’ve learned how to use a single onchange handler in JavaScript to identify and handle changes in multiple input elements. We’ve explored different techniques to distinguish between input elements, making our code more maintainable and scalable. With these skills, we can efficiently manage complex forms and user interactions in our web applications.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved