0

我已经在网上搜索（我所期望的）这个问题的基本答案。

我有一个 HTML 表单，我正在为一个特定的系统组合在一起。我有两个文本字段，用户将在其中输入两个温度。我想要第三个文本字段，onBlur 将产生这两个温度之间的差异。我有一个脚本，我认为它正朝着正确的方向前进，但不起作用。由于我将使用它的系统，我不能在 HTML 中包含标签。

我的脚本：

    <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>

我的 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>

谁能解释我在这里做错了什么？同样，我希望用户输入 TempIn，点击选项卡，输入 TempOut，点击选项卡，然后自动计算 Delta。

就像我说的，我在网上找到的每一种资源都以稍微不同的方式实现它，但如果我使用任何一种方法，我似乎都无法让它发挥作用。

任何帮助是极大的赞赏。谢谢。

4

6 回答 6

3

Aninput没有innerHTML，您应该使用 value。

document.getElementById('Delta').value = Delta

此外，始终将第二个参数传递给parseInt基数。否则它经常会猜错基数。

于 2012-05-08T19:48:13.393 回答
2
  1. 删除脚本中的注释： 。
  2. XHTML 中的所有标记和属性名称必须小写（可选）。即：模糊。
  3. 对于您预期的行为，我建议使用onfocus事件，它更有意义。
  4. 如果您可以通过脚本访问元素，则无需向 calculate_temp() 函数传递任何内容。
  5. 使用属性更改Delta输入的值。value

结果：

<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>
于 2012-05-08T20:00:01.330 回答
1

我会把我的帽子扔进擂台......

html:

    <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"/></p>
    </div> ​​​​

js：

/* store elements */
var TempIn = document.getElementById('TempIn'),
    TempOut = document.getElementById('TempOut'),
    Delta = document.getElementById('Delta');

function calculate_temp() {
    Delta.value = parseInt(TempIn.value,10) - parseInt(TempOut.value,10);
}

/* unobtrusive onblur */
TempIn.onblur = calculate_temp;
TempOut.onblur = calculate_temp;
Delta.onblur = calculate_temp;

这是一个小提琴：http: //jsfiddle.net/JKirchartz/TbHW3/

编辑可能应该提到，这个 JS 应该在你的</body>标签正上方，或者在 dom 加载时运行。

于 2012-05-08T20:01:02.500 回答
0

当相关控件失去焦点时触发该事件，因此只有当用户将焦点从输入OnBlur移开时才能调用您的代码。Delta您希望在TempOut输入失去焦点时调用它，因此应该设置事件处理：

<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" onBlur="calculate_temp(this.form.TempIn.value, this.form.TempOut.value)"/></p>
<p><label for="Delta">Delta: </label> <input type="text" name="Delta" id="Delta" /></p>
于 2012-05-08T19:51:07.027 回答
0

试试这个

脚本：

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

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()"/></p>
</div> 
</body>
于 2012-05-08T19:53:55.833 回答
0 
    <div> 
        <p><label for="TempIn">TempIn: </label><input type="text" name="TempIn" id="TempIn" onBlur="calculate_temp(document.getElementById('TempIn').value, document.getElementById('TempOut').value);"/></p>
        <p><label for="TempOut">TempOut: </label><input type="text" name="TempOut" id="TempOut" onBlur="calculate_temp(document.getElementById('TempIn').value, document.getElementById('TempOut').value);"/></p>
        <p><label for="Delta">Delta: </label> <input type="text" name="Delta" id="Delta" /></p>
    </div>
    <script language="javascript" type="text/javascript">
        <!--
        function calculate_temp(TempIn, TempOut) {

        var Delta = TempIn - TempOut;
        document.getElementById('Delta').value = Delta
        }
    // -->
    </script>
于 2012-05-08T19:54:39.733 回答