使用Javascript的HTML中的兩個字段之間的區別

我已經在網上搜索了（我期待的）這個問題的基本答案。使用Javascript的HTML中的兩個字段之間的區別

我有一個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。

就像我說過的，我在網上找到的每一個資源都有一個稍微不同的方式，但是如果我使用任何方法，我似乎無法得到它的工作。

任何幫助，非常感謝。謝謝。

來源

2012-05-08 Steve

嘗試'document.getElementById（'Delta'）。value = Delta;'而不是'innerHTML'。 –

當您在腳本函數中檢索它們時，爲什麼您將TempIn和TempOut作爲參數傳遞？ – Adil

使用onfocus而不是onblur可能會有所幫助！ – Katti

刪除腳本中的註釋：。
XHTML中的所有標籤和屬性名稱必須小寫（可選）。即： onblur。
對於您的預期行爲，我建議使用onfocus事件，它更有意義。
如果可以通過腳本訪問元素，則不需要傳遞任何內容至calculate_temp（）函數。
使用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>

來源

2012-05-08 20:00:01

是的！真棒..非常感謝你！任何人，我都道歉。是的，我已經在這裏呆了一年，但不知道如何在正確的答案上做出正確的禮節。從來沒有真正有過真正正確的答案。只是標記了這一個，謝謝大家的幫助！ – Steve

input沒有innerHTML，您應該使用值。

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

此外，總是傳遞第二參數parseInt這是基數。否則，它通常會猜測錯誤的基數。

來源

2012-05-08 19:48:13

我答應接受，如果我得到一個有效的答案：p我不認爲我有成功的答案在這裏回答！編輯：只接受了兩個答案，我的所有其他問題都沒有迴應..對不起！我仍然不清楚所有這些工作。 – Steve

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-08 19:51:07 Treb

試試這個

腳本：

<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-08 19:53:55

<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-08 19:54:39 Nate

我會扔我的帽子環....

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-08 20:01:02 JKirchartz

使用Javascript的HTML中的兩個字段之間的區別

回答

相關問題