Home/ Questions/Q 7910711
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T12:58:23+00:00

I have searched the web for (what I am expecting to be) a basic

  • 0

I have searched the web for (what I am expecting to be) a basic answer to this question.

I have an HTML form I am putting together for a specific system. I have two text fields that a user will input two temperatures into. I want to have a third text field that onBlur, will generate the difference between these two temperatures. I have a script which I think is heading in the right direction, but does not work. Because of the system I will be using this for, I cannot have tags in the HTML.

My script:

    <script language="javascript" type="text/javascript">
    <!--
    function calculate_temp(TempIn, TempOut) {
    var TempIn = parseInt(document.getElementById('TempIn').value);
    var TempOut   = parseInt(document.getElementById('TempOut').value); 
    var Delta = TempIn - TempOut;
    document.getElementById('Delta').innerHTML = Delta
    }
    // -->
    </script>

My HTML:

    <body> 
    <div> 
    <p><label for="TempIn">TempIn: </label><input type="text" name="TempIn" id="TempIn" /></p>
    <p><label for="TempOut">TempOut: </label><input type="text" name="TempOut" id="TempOut" /></p>
    <p><label for="Delta">Delta: </label> <input type="text" name="Delta" id="Delta" onBlur="calculate_temp(this.form.TempIn.value, this.form.TempOut.value)"/></p>
    </div> 
    </body>

Can anyone explain what I am doing wrong here? Again, I want the user to input TempIn, hit tab, input TempOut, hit tab and then the Delta be calculated automatically.

Like I said, every resource I find online does it a slightly different way, but I can’t seem to get it working if I use any of the approaches.

Any help is greatly appreciated. Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    1. Remove the comments in your script: .
    2. All tags and attribute names must be lowercase in XHTML (optional). i.e:
      onblur.
    3. For your expected behavior, I recommend use the onfocus event,
      it makes more sense.
    4. You don’t need to pass nothing to the calculate_temp() function if
      you can access the elements through the script.
    5. Change the value of the Delta input with the value property.

    Result:

    <head>

<title>Untitled 1</title>

    <script language="javascript" type="text/javascript">
        function calculate_temp(TempIn, TempOut) {
            var TempIn = parseInt(document.getElementById('TempIn').value);
            var TempOut   = parseInt(document.getElementById('TempOut').value); 
            var Delta = TempIn - TempOut;
            document.getElementById('Delta').value = Delta
        }   
    </script>

</head>

<body>

    <div> 
    <p><label for="TempIn">TempIn: </label><input type="text" name="TempIn" id="TempIn" /></p>
    <p><label for="TempOut">TempOut: </label><input type="text" name="TempOut" id="TempOut" /></p>
    <p><label for="Delta">Delta: </label> <input type="text" name="Delta" id="Delta" onfocus="calculate_temp()"/></p>
    </div> 

</body>
    • 0