Uncaught TypeError: document.getElementsById is not a function

　　今天部落客終於開始攻關javascript（俗稱js）了，不過要注意了，它和java可是一丁點關係都沒有，就像老婆餅和老婆一樣。

　　下面就讓我們來討論一下部落客這次犯下的低級錯誤吧

一、背景（解決方法在文末）

　　今天部落客要實現的內容是，點擊按鈕設置後，會獲取input文本框內輸入的文本內容，程式碼如下（會報錯）：

<div class="box1">屬&emsp;性:<input  type="text" class="sub1" placeholder="請輸入CSS屬性"></div>
<div><input id="sub" type="submit" value="設置"></div>
    <script>
        var SubOneValue = document.querySelector('#sub')
        SubOneValue.onclick = function (){
            Sub = document.getElementsById('sub1')
            console.log(Sub.value)
    </script>

　　頁面布局如下（上面達到程式碼不會顯示屬性值這一行元素的內容）（好吧，部落客偷了個懶）：

　

 

　　這裡需要注意：

console.log(Sub.value)

　　這行程式碼的目的是用來顯示input輸入框內輸入的內容的，類似於python中的print()函數，讓我們可以更直觀的判斷程式碼運行是否正確

二、解決辦法

　　這裡運行上面的程式碼會出現如下報錯：

　　解決辦法就是把Elements的s去掉就沒問題了（是不是很簡單）

False：Sub = document.getElementsById('sub1')
True：Sub = document.getElementById('sub1')

　　針對中二個低級的錯誤，部落客一開始是吧屬性值設置成了class，而不是id（為了試試通過class查找標籤的方法）。嘗試完畢，部落客為了圖方便直接把後面的ClassName修改成了Id，就導致了elements後面的s沒有刪掉，因為id是唯一的，所以對應的元素標籤只能是一個，而不像class的不唯一可以搜的多個標籤。

　　不過需要注意的是，按鈕的屬性值最好設置id，不要設置成class，因為class的屬性名可以重複使用在其他標籤上，而id則是唯一對應的，這樣會避面後期一些事件的觸發失敗問題。

　　今天的分享就到這裡啦~

　　感謝閱讀~

　　end...

Tags:

VirMach 便宜 VPS