2012-08-13 111 views
0
<!DOCTYPE html> 

<html> 
<head> 
    <meta charset="utf-8"> 
     <title>Javascript Form Testing</title> 
</head> 

<body> 
Name: <input type="text" name="Name" value="Name" id="fname"> <br> 
Email: <input type="text" name="Email" value="Email" id="mail" > <br> 
Phone: <input type="text" name="Number" value="Phone Number" id="dvr" onchange="validatePhone();"> 
<span id="phoneval"> ?</span> 

    <script type="text/javascript"> 
    phonenum = document.getElementById("dvr").value.length; 
     function validatePhone() { 
      if (phonenum == 10){ 
       document.getElementById('phoneval').innerhtml="<-- Valid"; 
      } 
      else{ 
       document.getElementById('phoneval').innerhtml="<-- Not Valid"; 
      } 
     } 
    </script> 
</body> 
</html> 

喜的特性「值」,我得到了錯誤「遺漏的類型錯誤:無法讀取屬性‘’空的」當標籤是在頭值,但因爲我移動它,它就消失了。但是,現在它輸出沒有錯誤,並沒有什麼。請幫忙?JAVASCRIPT - 遺漏的類型錯誤:無法讀取空

對不起任何格式和事物,新:/

+0

我不想提交答案,因爲我實際上在工作atm。首先最重要的是沒有什麼是調用validatePhone()..如果你只是希望它在dom被加載後運行(但是在資源被加載之前),那麼你可以把調用放在'validatePhone()'之前 但是,您可能想要在表單提交事件期間運行所有這些操作 – 2012-08-13 04:32:48

+0

Javascript對於大小寫敏感,應該是'innerHTML' – diEcho 2012-08-13 04:35:36

回答

4

編輯:

稍有不同的實現,它的工作原理:http://jsfiddle.net/SfTR2/確保JS是在HTML加載後,或使用window.onload

原來的答覆:

您需要在驗證功能中獲取長度:

function validatePhone() { 
     var phonenum = document.getElementById("dvr").value.length; //MOVE IT HERE 
     if (phonenum == 10){ 
      document.getElementById('phoneval').innerHTML="<-- Valid"; 
     } 
     else{ 
      document.getElementById('phoneval').innerHTML="<-- Not Valid"; 
     } 
    } 

如前所述,您正在緩存空的長度。

此外,正如@su提到的,您需要使用innerHTML

+1

如果我們在函數外面指定'var phonenum'會怎麼樣。我認爲這樣也行。 – diEcho 2012-08-13 04:36:56

+0

是的,只要你得到函數內的長度(和值)。 – 2012-08-13 04:37:46

+0

如果我們在函數之外定義了一些變量,那麼它的範圍將是**全局**,並且可以在任何函數中使用。看到[demo](http://jsfiddle.net/KsW8E/) – diEcho 2012-08-13 04:42:13

0

添加

validatePhone(); 

到腳本的末尾(您定義的功能,但從來不叫的話)。和innerHTML的改變innerHTML的

+0

不要忘記phonenum的賦值超出了函數的範圍。 – ChaosPandion 2012-08-13 04:33:28

+0

好的,這似乎在一定程度上起作用,但它沒有更新變化? (或模糊,或其他) – 2012-08-13 04:40:56

+0

爲了使onchange工作,您需要移動var phonenum = document.getElementById(「dvr」).value.length;到驗證電話功能(如亞當希思的答案),以便它獲得電話號碼的更新值。 – 2012-08-13 04:45:20

相關問題