Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.

# Thread: Four textboxes in a ratio - Probably simple.

1. ## Four textboxes in a ratio - Probably simple.

Ok, the idea is that the five inputs are in the ratio 40:5:4:3:2, and the user can edit each of the textboxes and have the other four update accordingly onchange. Not had a lot of experience with Javascript, so this could be a simple concept I've misunderstood or something, but can anyone explain why this isn't working?

Code:
```<script type="text/javascript">
function update(m,n,o,p,q) {
var a=document.getElementById(m).value;
var b=document.getElementById(n).value;
var c=document.getElementById(o).value;
var d=document.getElementById(p).value;
var e=document.getElementById(q).value;

var xtx='40';
var xgox='5';
var xcx='4';
var xgrx='3';
var xbx='2';

b=a*(n+'x')/(m+'x');
c=a*(o+'x')/(m+'x');
d=a*(p+'x')/(m+'x');
e=a*(q+'x')/(m+'x');
}

</script>

<form>
<input type="text" id="xt" onchange="update(xt,xgo,xc,xgr,xb)"/><br />
<input type="text" id="xgo" onchange="update(xgo,xt,xc,xgr,xb)"/><br />
<input type="text" id="xc" onchange="update(xc,xgo,xt,xgr,xb)"/><br />
<input type="text" id="xgr" onchange="update(xgr,xgo,xc,xt,xb)"/><br />
<input type="text" id="xb" onchange="update(xb,xgo,xc,xgr,xt)"/><br />
</form>```

• If I understand you correctly, then this will serve...
Code:
```<script type="text/javascript">
function update(sender, coef) {
var frm = sender.form;
var newValue = parseFloat(sender.value) / coef;
frm.xt.value = (sender.name != "xt") ? (newValue * 40).toFixed(2) : sender.value;
frm.xgo.value = (sender.name != "xgo") ? (newValue * 5).toFixed(2) : sender.value;
frm.xc.value = (sender.name != "xc") ? (newValue * 4).toFixed(2) : sender.value;
frm.xgr.value = (sender.name != "xgr") ? (newValue * 3).toFixed(2) : sender.value;
frm.xb.value = (sender.name != "xb") ? (newValue * 2).toFixed(2) : sender.value;
}
</script>

................

<form action="#">
<input type="text" id="xt" name="xt" onchange="update(this, 40);" /><br />
<input type="text" id="xgo" name="xgo" onchange="update(this, 5);" /><br />
<input type="text" id="xc" name="xc" onchange="update(this, 4);" /><br />
<input type="text" id="xgr" name="xgr" onchange="update(this, 3);" /><br />
<input type="text" id="xb" name="xb" onchange="update(this, 2);" /><br />
</form>```

• ## Users who have thanked Amphiluke for this post:

Kristofa (07-18-2009)

• Works like a dream, although it's going to take some serious googeing before I understand whats going on. Out of interest, why didn't my script work?

Thanks

• Originally Posted by Kristofa
Out of interest, why didn't my script work?
Firstly, enclose id with quotes when call the `update` function
`onchange="update('xt','xgo','xc','xgr','xb')"`

Secondly, one is only able to set the `value` attribute directly (but not via auxiliary variable). Id est such a code
Code:
```var a=document.getElementById(m).value;
a='new value';```
does not change input value, but reassign the `a` variable instead...

Thirdly, I am in perplexity of this:
Code:
```b=a*(n+'x')/(m+'x');
c=a*(o+'x')/(m+'x');
d=a*(p+'x')/(m+'x');
e=a*(q+'x')/(m+'x');```

• Here is my attempt, not nearly as elegant as Amphiluke's, but filters out NaN.

Code:
```<script type="text/javascript">

function update(num) {
var a = document.getElementById("xt").value;
var b = document.getElementById("xgo").value;
var c = document.getElementById("xc").value;
var d = document.getElementById("xgr").value;
var e = document.getElementById("xb").value;

if (isNaN(a)) {document.getElementById("xt").value = ""; return false}
if (isNaN(b)) {document.getElementById("xgo").value = ""; return false}
if (isNaN(c)) {document.getElementById("xc").value = ""; return false}
if (isNaN(d)) {document.getElementById("xgr").value = ""; return false}
if (isNaN(e)) {document.getElementById("xb").value = ""; return false}

if (num == 1) {
document.getElementById("xgo").value = a/40 * 5;
document.getElementById("xc").value = a/40 * 4;
document.getElementById("xgr").value = a/40 * 3
document.getElementById("xb").value = a/40 * 2
}

if (num == 2) {
document.getElementById("xt").value = b/5 * 40;
document.getElementById("xc").value = b/5 * 4;
document.getElementById("xgr").value = b/5 * 3;
document.getElementById("xb").value = b/5 * 2;
}

if (num == 3) {
document.getElementById("xt").value = c/4 * 40;
document.getElementById("xgo").value = c/4 * 5;
document.getElementById("xgr").value = c/4 * 3;
document.getElementById("xb").value = c/4 * 2;
}

if (num == 4) {
document.getElementById("xt").value = d/3 * 40;
document.getElementById("xgo").value = d/3 * 5;
document.getElementById("xc").value = d/3 * 4;
document.getElementById("xb").value = d/3 * 2;
}

if (num == 5) {
document.getElementById("xt").value = e/2 * 40;
document.getElementById("xgo").value = e/2 * 5;
document.getElementById("xc").value = e/2 * 4;
document.getElementById("xgr").value = e/2 * 3;
}
}

</script>

<form>
<input type="text" id="xt" onchange="update(1)"/><br />
<input type="text" id="xgo" onchange="update(2)"/><br />
<input type="text" id="xc" onchange="update(3)"/><br />
<input type="text" id="xgr" onchange="update(4)"/><br />
<input type="text" id="xb" onchange="update(5)"/><br />
</form>```

•

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•