An Array of Events Listeners

I have created a user-generated table with a quantity input field in each row. I want to trigger a calculation whenever the quantity changes. Since the table can have multiple rows, there will be multiple quantity fields.

The current code snippet listens for changes in the "qty" field, but it only works for the first row of the table. Can anyone suggest how I can make the event listener apply to all instances of the "qty" field?

// When Quantity Changes:
var qtys = document.getElementsByName("qty[]");
var i;
for (i = 0; i < qtys.length; ++i) {
    qtys[i].addEventListener("change", totalIt, false);
    qtys[i].addEventListener("input", totalIt, false);
}

Check out the jsfiddle of the code here: http://jsfiddle.net/jDfFU/95/

Answer №1

It appears that the other rows in the table are being dynamically added - instead of attaching an event listener to each one, you could add it to the parent table and then check the name of the target element. Alternatively, you can bind the event to each dynamically added row individually.

Here's an example for the first option -

var mainTable = document.getElementById('dataTable');
mainTable.addEventListener('change', function(e){
   if (e.target.getAttribute("name") === 'qty[]') {
        calculateTotal();
    }
});

mainTable.addEventListener('input', function(e){
   if (e.target.getAttribute("name") === 'qty[]') {
        calculateTotal();
    }
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the integration of methods in Vue.js components

Within my Vuejs project, I developed a new form component and integrated it into the main index component. This new component needs to validate certain fields, with validation methods already created in the parent component. However, I am facing difficulti ...

Choose the specific selector following the current selector

Consider this example of code: <script> $(document).ready(function () { $('span').each(function () { $(this).html('<div></div>') ; if ( $(this).attr('id') == 'W0' ...

The MUI Time picker fails to display the correct time value in the input field with proper formatting

My primary goal is to implement a MUI time picker with yup validation and react-hook-form. However, I am encountering an issue where the selected time from the time picker is not being updated in the text field as expected. https://i.sstatic.net/LVkgK.png ...

The $.getJson function encounters issues when the output is in the form of a string

I have a RESTful service set up for a fun Fizz Buzz game, it's running smoothly and hosted on Heroku ( - feel free to adjust the inputText parameter as needed). However, I am encountering an issue when trying to integrate it into a webpage, especially ...

Avoid using the Router with the Search component in React JS

Having trouble rendering my Search component within the main Header component using react-router-dom. I suspect there's an issue with this line of code <Route render={({ history }) => } /> I've been stuck on this for two days now... T ...

What is the process of adding a div to the left side of the parent element in AngularJS

I am trying to append the code on the left side of the click. My current controller code looks like this: demo.$inject = ['$scope']; demo.directive("boxCreator", function($compile){ return{ restrict: 'A', l ...

Utilize React without integrating a router component

For my web application built with reactjs, I am considering creating a multi-page site rather than a single page. Should I bundle all the react code into one file and include it on every page of the application, then utilize the exposed function to render ...

Transferring a JavaScript Value to a PHP Variable (Under Certain Constraints)

Although I have reviewed existing questions and answers related to this issue, I found that the solutions provided do not suit my specific situation. Discussing the differences between client-side JavaScript and server-side PHP, two common solutions are: ...

JavaScript code to convert a query into an array

Is there a way to search through a JavaScript array to find all names that start with the letter A? If so, how can I display all of the information associated with those names? Name":"Albert","age":"14" Name":"Alison","age":"14" Here is my JSON array: ...

Vue Component Update DisorderI hope this meets your expectations

Below is my code using Bootstrap, Vue, and Axios: SETUP: *Please disregard the tab-contents in component_a main.js Vue.component('component_a', { props: ['info'], template: `<div> // Component A template code here } ...

Vector indicating the direction of a rotation in Three.js

I am in the process of rotating an arrow on the surface of a planet to align with the direction of its travel. I have the direction vector and the up vector from the surface normal. How can I convert this into a quaternion for the rotation of my arrow? I a ...

What is the best way to implement this component into my vue.js project?

I am having trouble integrating this vue component into my app as it is not loading properly. You can find the source of the component here. The following warnings are showing up: Unresolved function or method isNumeric() at line 35 Unused parameter e at ...

Organizing DIVs upon website initialization

My website features a layout with three columns: <div id="column1"></div> <div id="column2"></div> <div id="column3"></div> I currently have 3 divs on the webpage: <div id="1">aaa</div> <div id="2">b ...

Experiencing a "non-serializable value found in the state" error specifically while utilizing redux toolkit, but this issue does not occur with traditional redux implementations

While transitioning my app to utilize Redux Toolkit, I encountered an error after switching over from createStore to configureStore: A non-serializable value was found in the state at path: `varietals.red.0`. Value:, Varietal { "color": "red", "id": " ...

jQuery's Offset().left is experiencing some issues and not functioning correctly

Do you have a question about the jQuery offset() function? On my website, I utilize it to show an "email a friend" window when the email icon is clicked. However, the problem is that the window ends up stuck to the right side of the browser's window ...

Fetching data from a Django view using a JavaScript AJAX POST call

Utilizing Javascript for an asynchronous request to a Django View, I am able to successfully receive data from the POST request. However, I am encountering issues with returning a confirmation message that the process was successful. Despite expecting xhtt ...

Is it possible to add a class to a child element deep within the component hierarchy while using TransitionGroup/CSSTransition in React?

I currently have a setup like this: Parent Component: <TransitionGroup> { items.map((child, index) => { // do something return ( <CSSTransition key={index} nodeRef={items.nodeRef} timeout={1000} classNames={'item ...

Error in AJAX POST: base64 string formatting issue

Struggling with making an AJAX POST successfully upload and retrieve a base64 string to/from my SQL database. Upon receiving the string from the database via AJAX, it appears to be the same base64 string, but with random line breaks that render it non-func ...

The module could not be located: Issue: Unable to find 'vue-confirm-dialog'

My app is built on Vue.js + node.js. I recently tried to integrate the vue-confirm-dialog package from npm, but encountered an issue with this code line: import VueConfirmDialog from 'vue-confirm-dialog' Despite running npm install --save vue-co ...

Modifying the information displayed in a navigation panel or division using JavaScript

I am working on a navigation system that looks like this: <nav class="subnav"> <ul> <li><a href="a.html">This link leads to content A.</a></li> <li><a href="a.html">This link goes to content B.</a> ...