asked on

Javascript text field calculate and pass result and the difference to another two text fields

Hi,
How can I calculate text field value and pass result and the difference to another two text fields, the code I have is not updating when the values changed.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function compute()
{
var num1 = parseInt(document.form1.fawour.value);
var num2 = parseInt(document.form1.against.value);
var computation = num1 - num2;
document.form1.difference.value = computation;
if (document.form1.difference.value == 'NaN')
{
            document.form1.difference.value = '';
            alert('Please enter score');
      }
}
function points()
{
var num1 = parseInt(document.form1.fawour.value);
var num2 = parseInt(document.form1.against.value);
var computation = 1;

       if (document.form1.fawour.value = document.form1.against.value)
{
       document.form1.point.value = computation;
       }
}
</script>
</head>

<body>
<p>
<form name="form1">

<input name="fawour" type="text" value="" size="4" maxlength="2">
-
<input name="against" type="text" onChange="points();compute()" size="4" maxlength="2"/>
</p>
<p>
<input type="text" name="point" id="point">
<input type="text" name="difference" id="difference">
</form>
</p>
</body>
</html>

Lolly-Ink

The if statement on line 24 of your code is assigning rather than comparing values. It should be:

if (document.form1.fawour.value == document.form1.against.value)

Open in new window

sinanosan

ASKER

Lolly, thanks for that, still need values to be updated automatically if text field values changed.

Lolly-Ink

Use the onkeyup event for the input elements.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
   function compute()
   {
   var num1 = parseInt(document.form1.fawour.value);
   var num2 = parseInt(document.form1.against.value);
   var computation = num1 - num2;
   document.form1.difference.value = computation;
   if (document.form1.difference.value == 'NaN')
   {
            document.form1.difference.value = '';
//            alert('Please enter score');
      }
   }
   function points()
   {
   var num1 = parseInt(document.form1.fawour.value);
   var num2 = parseInt(document.form1.against.value);
    var computation = 1;
 
       if (document.form1.fawour.value == document.form1.against.value)
      {
        document.form1.point.value = computation;
         }
   }
   </script>
</head>
 
<body>
<p>
              <form name="form1">
 
  <input name="fawour" type="text" onkeyup="points();compute()" value="0" size="4" maxlength="2">
-
  <input name="against" type="text" onkeyup="points();compute()" value="0" size="4" maxlength="2"/>
</p>
<p>
  <input type="text" name="point" id="point">
  <input type="text" name="difference" id="difference">
                </form>
</p>
</body>
</html>

Open in new window

sinanosan

ASKER

Value for first field is not changing, it should only give 1 point when the entry for both text box is equal (draw) if not it should clear the text field

ASKER CERTIFIED SOLUTION

Lolly-Ink

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer