Develop Reference

How to loop through,and evaluate sequentially named form elements with JavaScript

I need to loop through, and evaluate the values of form elements by calling the function updt().
const updt = () => {
let f = document.forms['myform'];
f.r1c3.value = f.r1c1.value * f.r1c2.value;
f.r2c3.value = f.r2c1.value * f.r2c2.value;
f.r3c3.value = f.r3c1.value * f.r3c2.value;
}
<form id="myform" name="myform">
<input type="text" name="r1c1" onchange="updt()">
<input type="text" name="r1c2">
<input type="text" name="r1c3">
<input type="text" name="r2c1">
<input type="text" name="r2c2">
<input type="text" name="r2c3">
<input type="text" name="r3c1">
<input type="text" name="r3c2">
<input type="text" name="r3c3">
</form>
My wish is to loop through the form elements, and fill c3 with the product of c1 and c2. Here is my attempt...
for (var n=1; n<=3; n++) {
`f.r${n}c3.value` = `f.r${n}c1.value` * `f.r${n}c2.value`;
}
The above loop did not work.
eval() worked for the right side. But the left side still did not work.
The reason I want to loop, is because there are about 20 lines, not just the 3 shown above. So I want to shorten the code somehow.
Any thoughts?
TIA

This just produces a string, nothing more:
`f.r${n}c3.value`
So it isn't executable code. And eval can help, but there's a simpler way to do this. You can use a string to access property names of an object. And since only that one property name is changing, the rest can be code like any other. For example:
f[`r${n}c3`].value
So the whole line would be:
f[`r${n}c3`].value = f[`r${n}c1`].value * f[`r${n}c2`].value;

You can simply use bracket notation for accessing properties dynamically, like this:
for (var n=1; n<=3; n++) {
f[`r${n}c3`].value = f[`r${n}c1`].value` * f[`r${n}c2`].value;
}

I'm posting an answer just because i made a one-liner and it looks great :)
The spread operator on a form gives you all the inputs of a form
Then i filter them to get only the rc3 inputs(result)
Finally i set each value with the other two inputs of the row
const myform = document.forms['myform']
const setFormValue = () =>
[...myform]
.filter(input => /^r\dc3$/.test(input.name))
.forEach(input => input.value = Number(myform[input.name.replace(/\d$/, '1')].value) * Number(myform[input.name.replace(/\d$/, '2')].value))
myform.addEventListener('submit', e => {
e.preventDefault();
setFormValue()
});

JavaScript while loop won't increment properly for HTML document [duplicate]

Something that has bugged me for a while and always giving me headaches.
I have an input field with a value in numbers
<input id="base-life" class="base-stats" type="number" name="base-life" value="20" readonly />
I am picking up the value of the input field with
let charlife = document.getElementById('base-life');
I have a number with which i want to increase the value of the base-life input field. This of course changes dynamically based on other stuff but let's say it's 2
let increaseWith = 2;
in an onclick function i want to increase base-life with 2 (base-life + 2) everything it is clicked
function increase() {
charlife.value += increaseWith;
}
Now this only adds 2 to the value of the input field, makes it 202. I know that this happens when one of the numbers are actually strings. Perhaps my charlife. I tried everything and it gets worse. I tried parseInt(charlife.value) - no luck. I tried other methods but it doesn't work. And i only have this problem with input fields. When the element is just a or another simpler html element - it all works easier. Has to do with how JS parses input fields. Can someone shed some light?

let charlife = document.getElementById('base-life');
let increaseWith = 2;
function increase() {
value = parseInt(charlife.value);
value += increaseWith;
charlife.value = value;
}
<input id="base-life" class="base-stats" type="number" name="base-life" value="20" readonly />
<button onclick="increase()">Increase</button>

Here is the working snippet with some custom code that is according to your specifications
<input id="base-life" class="base-stats" type="number" name="base-life" value="20" readonly />
<button class="add" onclick="let increaseWith = 2;document.getElementById('base-life').value = parseInt(document.getElementById('base-life').value)+increaseWith;">add</button>

Total price calculation with Javascript

Am trying to multiply two cells in HTML table. Here below the code I created:
function multiply() {
var u_price = parseFloat(document.getElementsByName("u-price"));
var s_meter = parseFloat(document.getElementsByName("s-meter"));
var t = u_price * s_meter;
document.getElementById("tot-price").value = t.toFixed(3);
}
<tr>
<td><input type="text" class="input-box" name="u-price" value="0" onKeyUp="multiply();"></td>
<td><input type="text" class="input-box" name="s-meter" value="1" onKeyUp="multiply();"></td>
<td><input type="text" class="input-box" name="tot-price" id="tot-price" disabled></td>
</tr>
The value returned is NaN.
Can you please advise on how to handle this.
Thank you in advance!

A couple changes needed:
getElementsByName returns an array of elements matching the name parameter.
So if you're using this method, you should change it to getElementsByName[0] and make sure you only have one element that matches (i.e. - no other elements with a matching name).
You forgot .value
So your function should look like this -
function multiply() {
var u_price = parseFloat(document.getElementsByName("u-price")[0].value);
var s_meter = parseFloat(document.getElementsByName("s-meter")[0].value);
var t = u_price * s_meter;
document.getElementById("tot-price").value = t.toFixed(3);
}

document.getElementsByName returns an array of elements by that name and hence we need to access the value of the first element of that array.
Instead of document.getElementsByName("u-price"),
You will have to use document.getElementsByName("u-price")[0].value to get the value.

Updating form input field value based on other inputs

I am trying to build a calculator of sorts where you an input all but one variable and get the final variable autofilled in the form. I am trying this using a javascript function oninput for the form. However I am not sure how to achieve this. I have written a basic example of what I want below (though this does not work):
<form oninput="thermal()">
<input type="number" name="avgTemp" id="avgTemp" class="five-col">
<input type="number" name="volume" id="volume" class="five-col">
<input type="number" name="deltaTemp" id="deltaTemp" class="five-col">
<input type="number" name="Q" id="Q" class="five-col">
</form>
function thermal(){
var volume = document.getElementById("volume");
var deltaTemp= document.getElementById("deltaTemp");
value = deltaTemp;
}

function thermal(){
let avgTemp = document.getElementById("avgTemp").value;
let volume = document.getElementById("volume").value;
let deltaTemp = document.getElementById("deltaTemp").value;
let q = document.getElementById("Q") // no value here yet; we will make this our total
console.log(avgTemp, volume, deltaTemp, q)
}
Well, let's start with this. This gives you each input value individually - from here, we can implement the pertinent logic to combine input values into one input field. I will make the Q input our "total" just so you can get a picture of how combining may look.
function thermal(){
let avgTemp = document.getElementById("avgTemp").value;
let volume = document.getElementById("volume").value;
let deltaTemp = document.getElementById("deltaTemp").value;
let q = document.getElementById("Q");
let total = Number(avgTemp) + Number(volume) + Number(deltaTemp)
console.log(total)
q.value = total
}
I am not sure what you are looking for but this should give you a decent head start. Fire away if you have any questions.
If you want to play around with it, here is the codepen:
https://codepen.io/Pulse3358/pen/ExPZaVM

JavaScript Real Time Calculation

I have built a table with custom inputs numbers with jeditable. The Input type is gone once you put the value
I need to find a JavaScript Real Time Calculation which automatically makes the amount of my values.
I have found 2 interesting examples very suitable for my case but there is the possibility to achieve it the same without using the form and inputs?
First example
Second example

Yes, it is. As you know a div element can be accessed by document.getElementById('div_id') and its value can be accessed by document.getElementById('div_id').value.
So take out the form and insert an id for the div's that you need and access the value and then find the sum and then set the value as the sum to another div. Here is the code
<script>
function calculateBMI() {
var wtStr =document.getElementById('w').value;
if (!wtStr)
wtStr = '0';
var htStr = document.getElementById('h').value;
if (!htStr)
htStr = '0';
var weight = parseFloat(wtStr);
var height = parseFloat(htStr);
document.getElementById("r").value = weight + height;
}
</script>
<input id = "w" type="Text" name="weight" size="4" onkeyup="calculateBMI()"> Weight (in Kilos)
<input id = "h" type="Text" name="height" size="4" onkeyup="calculateBMI()"> Height (in Centimeters)<br>
<input id = "r" type="Text" name="BodyMassIndex" id="BodyMassIndex" size="4"> BMI
<input type="button" style="font-size: 8pt" value="Calculate" onClick="calculateBMI()" name="button">
​and if you don't want input you can use textarea.