/    Sign up×
Community /Pin to ProfileBookmark

Javascript Calculations

A very good morning to all.

I have a ‘spreadsheet’ style layout on my webpage. It’s made up from an HTML table and a form with input boxes. I have a total column on the end of each row and when I submit the form it does the math and adds up numbers from several boxes on that row and adds them to a total box. It’s also saved into a database so the total can be redisplayed later.

Each box has a unique name. As I loop through an array I create the table row on my page and add the increasing integer into the name to make it unique.

What I’m looking to do is a enchantment that when something is typed into one cell it calculates the values from each input on that row and adds the total into the final box.

So here for example. If I added 3 into field 2, and 5 into field 3, I’d get 7 into field 4

I’m not sure where to start given I have so many rows. If I had just one row, it’s just get the values from all those boxes on a keydown event and do the math and update the designated total box.

Many thanks to all who can help.

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumJan 10.2022 — I recommend the following procedure:

Add an event listener for "input" or modification of the value of an input element to your table. When changing a value in any input element this event will bubble up to the table. event.target is the input having been modified. Starting from this element find the table row where it is located in by use of the function `closest</C>. Starting from here find all inputs relevant for calculation the total. Then calculate the latter and enter it into the designated box.
<CODE>
`<i>
</i> // add an eventlistener for "input" or modifications of an input:
document.querySelector('table').addEventListener('input', event =&gt; {
const
// event.target is the input being affected,
// get the corresponding row:
row = event.target.closest('tr'),
// get box for output:
totalInput = row.cells[3].querySelector('input');
if (event.target != totalInput) {
const
// get all inputs relevant for calculating the total:
input1 = row.cells[0].querySelector('input'),
input2 = row.cells[1].querySelector('input'),
input3 = row.cells[2].querySelector('input'),
// now calculate the total:
total = parseInt(input1.value) + parseInt(input2.value) + parseInt(input3.value);
// and enter it into the designated box:
if (!isNaN(total)) {
totalInput.value = total;
} else {
totalInput.value = '';
}
}
});<i>
</i>
``
×

Success!

Help @singaporeDude spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...