使用 Javascript 的 HTML 中两个字段之间的区别

Difference between two fields in HTML using Javascript

本文关键字：两个 字段 之间 区别 Javascript HTML 使用      更新时间：2023-09-26

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

我有一个HTML表单，我正在为一个特定的系统组合在一起。我有两个文本字段，用户将在其中输入两个温度。我想有第三个文本字段，在模糊上，将产生这两个温度之间的差异。我有一个脚本，我认为它正朝着正确的方向前进，但不起作用。由于我将使用它的系统，我不能在 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>

我的网页：

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

就像我说的，我在网上找到的每个资源都以略有不同的方式进行，但是如果我使用任何一种方法，我似乎无法让它工作。

任何帮助将不胜感激。谢谢。

input没有

innerHTML，你应该使用value。

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

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

  1. 删除脚本中的注释：。
  2. 在 XHTML 中，所有标记和属性名称都必须是小写的（可选），即：在模糊。
  3. 对于您的预期行为，我建议使用 onfocus 事件，这更有意义。
  4. 在以下情况下，您不需要向 calculate_temp（） 函数传递任何内容您可以通过脚本访问元素。
  5. 使用 value 属性更改Delta输入的值。

结果：

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

我会把我的帽子扔进戒指......

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

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

当相关控件失去焦点时，将触发 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>

试试这个

脚本：

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

    <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>
相关文章：