document.getElementById擷取不到值的幾種原因分析

 前幾天修改那個分頁類，想加入跳轉到指定頁的功能，就是使用者直接輸入頁碼，點擊按鈕就可以跳到指定的頁碼！

    一看這個需求，就可以想到利用GET傳值的方式，但常規GET方式需要把連結寫入標籤的a href裡面，而我們實際上是希望用按鈕來進行點擊，而不是一個簡單的超連結形式。於是這裡就得用到Javascript在按鈕的onclick事件下寫代碼。很明白，就是將input的value(使用者輸入的頁碼)傳到onclick的代碼裡，這裡用javascript的location來完成跳轉。

    好了，整體就是這個樣子，至於getElementById這個方法我就不多說了。重點說說我遇到的問題以及如何解決的。

1.Javascript本身不會報錯，只要不出你預期的結果，那麼代碼肯定是有問題的。這個時候可以看看代碼裡的符號，比如說單引號、雙引號、大括弧、小括弧等等...因為這段代碼不是直接在JS檔案中寫的，而是用PHP進行構造來輸出的，再加上PHP本身輸出需要用到單引號、雙引號，所以這個時候很多符號混合在一起是很容易出錯。不要緊，你可以先運行一下，然後再查看網頁原始碼來看看當前的Javascript到底是不是你需要的那一段，看到少了什麼符號我們就立馬給補上，不過這個時候還需要注意一點，如果要直接輸出單引號、雙引號的話，在PHP的代碼裡這裡需要用‘\’來進行轉義。

上面的問題一般是不會彈出任何結果的，即使我們用alert來查看設定的變數，因為Javascript代碼存在問題，它根本就沒辦法執行！假設你已經改正了文法上的錯誤，那麼我們繼續看...我們可以用以下代碼來擷取使用者輸入的頁碼，並列印輸出看看正確與否。

 

  
var uPage=document.getElementById('pa').value; 
  
alert(uPage); 
 

2.如果這個時候一直彈出"undefined"的提示，那麼至少說明你的Javascript代碼正確運行了，它沒有文法上的錯誤！至於為什麼undefined，我調試了很久都沒找出原因，後來無意中嘗試把value改成innerHTML，居然列印出了一些結果，不過仔細一看才知道列印出的是一個同id名的div中的內容，這下才恍然大悟...在分頁類中直接給input標籤的id取名為page了，而這個page我在其他的div中也使用了。於是將分頁類中input的id改為一個很變態的名字。其實這個時候就應該注意到這些問題，如果我們的代碼可能會提供給其他人使用，那麼命名就很重要了，如果只是在內部(就比如說我這裡input這個標籤只在類裡面使用)，那麼名字應該盡量取得複雜一些，這樣它與使用者的命名發生衝突的可能性就很小了。

     最後：

 

  
document.getElementById('idname').value;//擷取input標籤裡的值，value; 
  
document.getElementById('idname').innerHTML;//擷取div裡的html內容 
  
換種寫法取值.//value = document.getElementById("**").value;             value = document.getElementsByName("**)[0].value;