What is the process for attaching a JavaScript function to a specific element on the page?

Question

What is the process for attaching a JavaScript function to a specific element on the page?

In my webpage, I have multiple elements with unique IDs that all contain textboxes and labels as attributes.

Element 0
- Textbox
- Textbox
- Label
Element 1
- Textbox
- Textbox
- Label
Element 2
- Textbox
- Textbox
- Label

I want to show an error message when a user types in any of the textboxes. To do this, I've added an onkeydown JavaScript function to each attribute like so:

MyTextbox.Attributes.Add("onkeydown", "javascript:OnChangeData();");

This is my JavaScript function:

<script type="text/javascript">
    function OnChangeData() {
        var info = document.getElementById('<%= infoControl.ClientID%>');
        infoDonneePersonnelle.textContent = "Error!";
    }
</script>

Although everything seems to be working fine, there's an issue: When I type in a textbox of element 1 (which has ID 1), the error message appears in the last element with ID 5 instead of the first one where I typed.

In summary, I have 6 elements displayed with attributes. Whenever I type in a textbox of element 1, the error message is displayed in the last element regardless of where I actually made the input. How can I ensure that the error message is shown in the correct element based on its ID?

javascript c#asp.net

Answer 1

Answer №1

Revise your usage of OnChangeData to include the element reference when calling the function. By using OnChangeData(this), you will pass the reference of the specific element that triggered the event.

<script type="text/javascript">
    function OnChangeData(element) {
        var parentElement = element.parentElement;
        var personalDataInfo = parentElement.querySelector('.error-message');

        if (personalDataInfo) {
            personalDataInfo.textContent = "Error!";
        }
    }
</script>

Answer 2

Revise your usage of OnChangeData to include the element reference when calling the function. By using OnChangeData(this), you will pass the reference of the specific element that triggered the event.

<script type="text/javascript">
    function OnChangeData(element) {
        var parentElement = element.parentElement;
        var personalDataInfo = parentElement.querySelector('.error-message');

        if (personalDataInfo) {
            personalDataInfo.textContent = "Error!";
        }
    }
</script>

Answer 3

Answer №2

If I were to manage this situation, I would opt for delegated event handling coupled with relative DOM navigation:

Firstly, it's essential to ensure that the overarching container housing these repetitive setups is uniquely identifiable on the client side during runtime - be it through an ID or a distinct class.
Within the said overarching container, make sure that the containers encompassing these repeated setups share a common class.
Utilize JavaScript to attach event listeners such as keydown (or perhaps more suitably input) to the overarching container.
Upon the occurrence of the event, determine which specific container from step #2 it transpired in by utilizing the closest method on the event's target.
Locate the error display element through querySelector within the wrapper.

Here’s a practical example. For demonstrative purposes, I’ve set it up so that adding a digit to the fields results in an error message being displayed and removed:

document.getElementById("container").addEventListener("input", (event) => {
    // Locate the wrapper containing this input
    const wrapper = event.target.closest(".wrapper");
    // If no wrapper is found, or the target isn't an input, exit
    if (!wrapper || event.target.tagName !== "INPUT") {
        return;
    }
    
    // Obtain the input value
    const value = event.target.value;
    
    // Find the error element
    const errorElement = wrapper.querySelector(".error");
    
    // Display or clear the error message
    if (/\d/.test(value)) { // Placeholder for the error condition
        errorElement.textContent = "No digits allowed";
    } else {
        errorElement.textContent = "";
    }
});

.error {
    min-height: 1.2rem;
    color: #A00;
}

<!-- The parent container; alternatively, use document.body if necessary -->
<div id="container">

    <div class="wrapper">
        Element 0
        <div><input type="text"></div>
        <div><input type="text"></div>
        <div class="error"></div>
    </div>

    <div class="wrapper">
        Element 1
        <div><input type="text"></div>
        <div><input type="text"></div>
        <div class="error"></div>
    </div>

    <div class="wrapper">
        Element 2
        <div><input type="text"></div>
        <div><input type="text"></div>
        <div class="error"></div>
    </div>

</div>

Answer 4

If I were to manage this situation, I would opt for delegated event handling coupled with relative DOM navigation:

Firstly, it's essential to ensure that the overarching container housing these repetitive setups is uniquely identifiable on the client side during runtime - be it through an ID or a distinct class.
Within the said overarching container, make sure that the containers encompassing these repeated setups share a common class.
Utilize JavaScript to attach event listeners such as keydown (or perhaps more suitably input) to the overarching container.
Upon the occurrence of the event, determine which specific container from step #2 it transpired in by utilizing the closest method on the event's target.
Locate the error display element through querySelector within the wrapper.

Here’s a practical example. For demonstrative purposes, I’ve set it up so that adding a digit to the fields results in an error message being displayed and removed:

document.getElementById("container").addEventListener("input", (event) => {
    // Locate the wrapper containing this input
    const wrapper = event.target.closest(".wrapper");
    // If no wrapper is found, or the target isn't an input, exit
    if (!wrapper || event.target.tagName !== "INPUT") {
        return;
    }
    
    // Obtain the input value
    const value = event.target.value;
    
    // Find the error element
    const errorElement = wrapper.querySelector(".error");
    
    // Display or clear the error message
    if (/\d/.test(value)) { // Placeholder for the error condition
        errorElement.textContent = "No digits allowed";
    } else {
        errorElement.textContent = "";
    }
});

.error {
    min-height: 1.2rem;
    color: #A00;
}

<!-- The parent container; alternatively, use document.body if necessary -->
<div id="container">

    <div class="wrapper">
        Element 0
        <div><input type="text"></div>
        <div><input type="text"></div>
        <div class="error"></div>
    </div>

    <div class="wrapper">
        Element 1
        <div><input type="text"></div>
        <div><input type="text"></div>
        <div class="error"></div>
    </div>

    <div class="wrapper">
        Element 2
        <div><input type="text"></div>
        <div><input type="text"></div>
        <div class="error"></div>
    </div>

</div>

What is the process for attaching a JavaScript function to a specific element on the page?

Answer №1

Answer №2

Similar questions

Query in SQL to retrieve numbers that are multiples of a specified value

The MVC framework coupled with a robust Javascript/JQuery validation library is a winning

Include quotation marks around a string in C# to convert it into JSON format

Steps to send an object array using a promise

Assistance with Troubleshooting a Complicated JavaScript/TypeScript Software

Restrict magnification in THREE.js mousewheel interaction

Newbie in JavaScript - reinitiating my for loop journey

Show the word "Delivered" on the submission button once the message has been sent successfully

ASP C# Sorted and Paged

What is the best way to tidy up a function within a useEffect hook?

Ways to display the chosen value based on the item's index using Javascript in Angular

"Allow clients to upload and preview images on the front end without any need for server

When the React ref current is accessed from outside the component where it is initialized, it returns

Determine the output based on the data received from the ajax post request

A guide on utilizing jQuery to decode JSON data

Creating a model for this JSON data in C# is a straightforward process that involves defining

Ways to dynamically assign a class to a single element within a group of identical elements

Update the package.json file to match the contents found in the node_modules directory

GeckoDriver in Firefox causes an error when trying to .Quit() in Selenium version 3.0.1

Handling empty values in JSON data when sending it to the controller through AJAX