當值背對背時清除其他文本框的問題

Question

我是Javascript的初學者，這是我的第一個不僅僅是「剪切/粘貼/破解」的Javascript。我創建了一個計算器，用於輸入輸入時更新輸出，當輸入框模糊然後聚焦時，可以清除所有「答案盒」，但如果我將輸入框中的值退回，「答案盒」仍會顯示基於最後一個字符的'答案'。被退後的價值。

在我的'validiateTheInput'功能。我可以聲明一個'if ='3''來清除它們，當'3'是值時（最終不起作用），它會起作用，但如果字段出現，我似乎無法捕捉它空白做用戶退出框中的值。

我是不是癡迷於某種愚蠢的東西，還是我只是想念一些東西？

繼承人整個事情（與一些基本的HTML ommitted）： 驗證功能也有點矯枉過正，因爲我正在試圖趕上'空白輸入'做退格。

//jQuery keyup to grab input 
$(document).ready(function() { 
    $('#totalFeet').keyup(function() { 
     validiateTheInput(); 
    }); 
}); 

//clear calculated values  


function clearBoxes(answerbox, answerbox1, answerbox2, totalFeetField) { 
    answerbox.value = ""; 
    answerbox1.value = ""; 
    answerbox2.value = ""; 
    totalFeetField.value = ""; 
}; 

//validate input, then go to callAll (calc the output and display it) 


function validiateTheInput() { 
    var totalFeetField = document.getElementById('totalFeet'); 
    var answerbox = document.getElementById('answerbox').value; 
    var answerbox1 = document.getElementById('answerbox1').value; 
    var answerbox2 = document.getElementById('answerbox2').value; 

    // feel like I should be able to catch it here with the length prop. 
    if (totalFeetField.value.length == 0) { 
     clearBoxes(answerbox, answerbox1, answerbox2, totalFeetField); 
    } 

    // if input is usable, do the good stuff... 
    if (totalFeetField.value != "" && !isNaN(totalFeetField.value)) { 
     callAll(); // call the function that calcs the boxes, etc. 
    } 

    // if input is NaN then alert and clear boxes (clears because a convenient blur event happens) 
    else if (isNaN(totalFeetField.value)) { 
     alert("The Total Sq. Footage Value must be a number!") 
     document.getElementById('totalFeet').value = ""; 
    } 

    // clears the input box (I wish) if you backspace the val. to nothing 
    else if (totalFeetField.value == '3') { 
     clearBoxes(answerbox, answerbox1, answerbox2, totalFeetField); 
    } 
    // extra effort trying to catch that empty box :( 
    else if (typeof totalFeetField.value == 'undefined' || totalFeetField.value === null || totalFeetField.value === '') clearBoxes(answerbox, answerbox1, answerbox2, totalFeetField); 
} 


//group all box calc functions for easy inline call 


function callAll() { 
    calcFirstBox(); 
    calcSecondBox(); 
    calcThirdBox(); 
} 

// calculate box fields based on input box 


function calcFirstBox() { 
    var totalFeetField = document.getElementById('totalFeet'); 
    var answer = totalFeetField.value * 5.95; // set multiplier 
    document.getElementById('answerbox').value = answer.toFixed(2); 
} 

// calc the second box 


function calcSecondBox() { 
    var totalFeetField = document.getElementById('totalFeet'); 
    var answer = totalFeetField.value * 18.95; // set multiplier 
    document.getElementById('answerbox1').value = answer.toFixed(2); 
} 

// calc the third box 


function calcThirdBox() { 
    var totalFeetField = document.getElementById('totalFeet'); 
    var answer = totalFeetField.value * 25.95; // set multiplier 
    document.getElementById('answerbox2').value = answer.toFixed(2); 
} 

HTML：

<div id="calculator"> 

     <form name="calculate"> 
      <label for="total">Total Value to Calculate:</label> &nbsp&nbsp&nbsp&nbsp 
      <input id="totalFeet" type="text" name="total" size="15" onfocus="clearBoxes(totalFeet, answerbox, answerbox1, answerbox2);"><br /><br /> 


      <label for="answerbox">Total Value X &nbsp;$5.95:&nbsp&nbsp&nbsp&nbsp$</label> 
      <input id="answerbox" onfocus="this.blur();" type="text" name="answerbox" size="15"><br /><br /> 

      <label for="answerbox1">Total Value X $18.95:&nbsp&nbsp&nbsp$</label> 
      <input id="answerbox1" onfocus="this.blur();" type="text" name="answerbox1" size="15"><br /><br /> 

      <label for="answerbox2">Total Value X $25.95:&nbsp&nbsp&nbsp$</label> 
      <input id="answerbox2" onfocus="this.blur();" type="text" name="answerbox2" size="15"> 
     </form> 

</div> 

Answer 1

的問題是，你不存儲變量的元素對象 - 你存儲它們的值：

var answerbox = document.getElementById('answerbox').value; 
var answerbox1 = document.getElementById('answerbox1').value; 
var answerbox2 = document.getElementById('answerbox2').value; 

...所以後來，當您調用以下函數時，將這些變量作爲參數傳遞：

clearBoxes(answerbox, answerbox1, answerbox2, totalFeetField); 

...你沒有通過元素。您可以通過在變量賦值中的每行刪除.value來修復它。

工作演示：http://jsfiddle.net/AndyE/Mq6uN/

附註和無恥插頭：如果你想要的東西一點點比keyup更強大的用於檢測輸入，檢查出this blog post。

Answer 2

您將answerbox，answerbox1等的值傳遞給clearBoxes函數，而不是元素本身。

Answer 3

這裏是一個完整的jQuery的方法：

//jQuery keyup to grab input 
    $(document).ready(function() { 
     $('input[id$=totalFeet]').keyup(function() { 
      validiateTheInput(); 
     }); 
     function clearBoxes() { 
      $('input[id$=answerbox]').val(""); 
      $('input[id$=answerbox1]').val(""); 
      $('input[id$=answerbox2]').val(""); 
     } 
     //validate input, then go to callAll (calc the output and display it) 
     function validiateTheInput() { 
      var totalFeetField = $('input[id$=totalFeet]').val(); 
      var answerbox = $('input[id$=answerbox]').val(); 
      var answerbox1 = $('input[id$=answerbox1]').val(); 
      var answerbox2 = $('input[id$=answerbox2]').val(); 

      // feel like I should be able to catch it here with the length prop. 
      if (totalFeetField == "") { 
       clearBoxes(); 
      } 

      // if input is usable, do the good stuff... 
      if (totalFeetField != "" && !isNaN(totalFeetField)) { 
       callAll(); // call the function that calcs the boxes, etc. 
      } 

      // if input is NaN then alert and clear boxes (clears because a convenient blur event happens) 
      else if (isNaN(totalFeetField)) { 
       alert("The Total Sq. Footage Value must be a number!") 
       $('input[id$=totalFeet]').val(""); 
      } 

      // clears the input box (I wish) if you backspace the val. to nothing 
      else if (totalFeetField == '3') { 
       clearBoxes(); 
      } 
      // extra effort trying to catch that empty box :( 
      else if (typeof totalFeetField == 'undefined' || totalFeetField === null || totalFeetField === '') 
       clearBoxes(); 
     } 
     //group all box calc functions for easy inline call 
     function callAll() { 
      calcFirstBox(); 
      calcSecondBox(); 
      calcThirdBox(); 
     } 

     // calculate box fields based on input box 
     function calcFirstBox() { 
      var totalFeetField = $('input[id$=totalFeet]').val(); 
      var answer = totalFeetField * 5.95; // set multiplier 

      $('input[id$=answerbox]').val(answer.toFixed(2)); 
     } 

     // calc the second box 
     function calcSecondBox() { 
      var totalFeetField = $('input[id$=totalFeet]').val(); 
      var answer = totalFeetField * 18.95; // set multiplier 

      $('input[id$=answerbox1]').val(answer.toFixed(2)); 
     } 

     // calc the third box 
     function calcThirdBox() { 
      var totalFeetField = $('input[id$=totalFeet]').val(); 
      var answer = totalFeetField * 25.95; // set multiplier 

      $('input[id$=answerbox2]').val(answer.toFixed(2)); 
     } 
    }); 

而且，這裏的HTML

<form name="calculate" action=""> 
     <label for="total">Total Value to Calculate:</label> &nbsp&nbsp&nbsp&nbsp 
     <input id="totalFeet" type="text" name="total" size="15" onfocus="clearBoxes();"/><br /><br /> 


     <label for="answerbox">Total Value X &nbsp;$5.95:&nbsp&nbsp&nbsp&nbsp$</label> 
     <input id="answerbox" onfocus="this.blur();" type="text" name="answerbox" size="15"/><br /><br /> 

     <label for="answerbox1">Total Value X $18.95:&nbsp&nbsp&nbsp$</label> 
     <input id="answerbox1" onfocus="this.blur();" type="text" name="answerbox1" size="15"/><br /><br /> 

     <label for="answerbox2">Total Value X $25.95:&nbsp&nbsp&nbsp$</label> 
     <input id="answerbox2" onfocus="this.blur();" type="text" name="answerbox2" size="15"/> 
    </form> 

有時混合jQuery和普通的JavaScript不工作也很好。當第一個文本框爲空時，此代碼應該可用於清除文本框。它也適用於數字驗證。