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...