CODEWITHSUNDEEP
javascripthtml
aleksXPO
aleksXPO

Reputation: 123

form calculation JS (radio)

the HTML part , just a slice from my code:

    <ul>
        <li>HP:<input type="text" id="hp" size="3" maxlength="3"> </li>
        <li>SP:<input type="text" id="sp" size="3" maxlength="3"> </li>
        <li>EA:<input type="text" id="ea" size="3" maxlength="3"> </li>
        <li>ED:<input type="text" id="ed" size="3" maxlength="3"> </li>
        <li>PA:<input type="text" id="pa" size="3" maxlength="3"> </li>
        <li>PD:<input type="text" id="pd" size="3" maxlength="3"> </li>
    </ul>
<div class="train">
    <h3>Add Trainer:</h3>
    <ul>
        <li>HP:<input type="radio" name="at" id="ahp"></li>
        <li>SP:<input type="radio" name="at" id="asp"></li>
        <li>EA:<input type="radio" name="at" id="aea"></li>
        <li>ED:<input type="radio" name="at" id="aed"></li>
        <li>PA:<input type="radio" name="at" id="apa"></li>
        <li>PD:<input type="radio" name="at" id="apd"></li>
    </ul>
</div>

The JS:(Where the problem is)

function trener1() {
  var test1 = document.getElementById('ahp').checked,
    x = Number(document.form.hp.value),
    xSum = 0;
  if (test1) {
    xSum = x + x * 0.1;
  } else {
    xSum = x - x * 0.1;
  }
  document.form.hp.value = xSum;
};

function trener2() {
  var test2 = document.getElementById('asp').checked,
    x = Number(document.form.sp.value),
    xSum = 0;
  if (test2) {
    xSum = x + x * 0.1;
  } else {
    xSum = x - x * 0.1;
  }
  document.form.sp.value = xSum;
};

function trener3() {
  var test3 = document.getElementById('aea').checked,
    x = Number(document.form.ea.value),
    xSum = 0;
  if (test3) {
    xSum = x + x * 0.1;
  } else {
    xSum = x - x * 0.1;
  }
  document.form.ea.value = xSum;
};

function trener4() {
  var test4 = document.getElementById('aed').checked,
    x = Number(document.form.ed.value),
    xSum = 0;
  if (test3) {
    xSum = x + x * 0.1;
  } else {
    xSum = x - x * 0.1;
  }
  document.form.ed.value = xSum;
};

function trener5() {
  var test5 = document.getElementById('apa').checked,
    x = Number(document.form.pa.value),
    xSum = 0;
  if (test5) {
    xSum = x + x * 0.1;
  } else {
    xSum = x - x * 0.1;
  }
  document.form.pa.value = xSum;
};

function trener6() {
  var test6 = document.getElementById('apd').checked,
    x = Number(document.form.pd.value),
    xSum = 0;
  if (test6) {
    xSum = x + x * 0.1;
  } else {
    xSum = x - x * 0.1;
  }
  document.form.pd.value = xSum;
};

So yeah the problem is that it won't subtract the value that has been added if i change my option which it should.. Where is the problem?

Upvotes: 1

Views: 92

Answers (1)

dfsq
dfsq

Reputation: 193261

The problem is that

document.form.ea.value

must be

document.forms.formName.ea.value

You forgot to specify the name of the form. It should also be document.forms.

Also try to optimise you code, something like this should work instead of all these repeating functions:

var radio = document.getElementsByName('at');

for (var i = radio.length; i--;) {
    radio[i].onchange = function () {
        var field = document.getElementById(this.id.substr(1)),
            x = Number(field.value),
            xSum = 0;
        if (this.checked) {
            xSum = x + x * 0.1;
        } else {
            xSum = x - x * 0.1;
        }
        field.value = xSum;
    };
}

And remove onclick handler:

<li>SP:<input type="radio" name="at" id="asp"></li>
...

Upvotes: 2

Related Questions