Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder Kristofa's Avatar
    Join Date
    Jun 2009
    Location
    Leicester
    Posts
    143
    Thanks
    7
    Thanked 20 Times in 20 Posts

    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>
    Last edited by Kristofa; 07-18-2009 at 07:59 PM.
    Learning along the way...

  • #2
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    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>
    I am still learning English

  • Users who have thanked Amphiluke for this post:

    Kristofa (07-18-2009)

  • #3
    Regular Coder Kristofa's Avatar
    Join Date
    Jun 2009
    Location
    Leicester
    Posts
    143
    Thanks
    7
    Thanked 20 Times in 20 Posts
    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
    Learning along the way...

  • #4
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    Quote 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');
    I am still learning English

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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
    •