getElementByClassName更改輸入值

Question

我有一個輸入標記正在被包含在一個javascript中。產生的輸入標籤如下所示：

<input class="mylivechat_prechat_name_box mylivechat_prechat_box" type="text"> 

有什麼辦法，我可以添加一個變量輸入變量的值的結束？

我使用JavaScript來設置表單域的嘗試：

var myClassName = document.getElementsByClassName('mylivechat_prechat_name_box mylivechat_prechat_box'); 
i = myClassName.length; 
myClassName[i].value = "TheseAreMyChanges"; 

但是，我得到的錯誤

Uncaught TypeError: Cannot set property 'value' of undefined

Answer 1

在你的代碼myClassName[i]會undefined，因爲i持有長最大索引值爲length - 1。並且字符串可以在末尾附加+=，從而得到連接值。

var myClassName = document.getElementsByClassName('mylivechat_prechat_name_box mylivechat_prechat_box'); 
myClassName[0].value += "TheseAreMyChanges"; 

如果你要更新的最後一個元素，然後通過指數length -1

var myClassName = document.getElementsByClassName('mylivechat_prechat_name_box mylivechat_prechat_box'); 
myClassName[myClassName.length - 1].value += "TheseAreMyChanges"; 

Answer 2

Array的是基於零獲得的元素，所以如果你看過length和使用該索引它比最高的一個更元件。試圖讀取數組邊界之外的元素將返回undefined - 所以使用length-1：

var myClassName = document.getElementsByClassName('mylivechat_prechat_name_box mylivechat_prechat_box'); 
var i = myClassName.length; 
myClassName[i-1].value = "TheseAreMyChanges"; 

Answer 3

你可以使用querySelector：

document.querySelector('.mylivechat_prechat_name_box.mylivechat_prechat_box').value+='NEW'; 

添加:last-child在選擇結束時，如果你想得到最後一個元素：

document.querySelector('.mylivechat_prechat_name_box.mylivechat_prechat_box:last-child'); 

希望這會有所幫助。

---

var elem = document.querySelector('.mylivechat_prechat_name_box.mylivechat_prechat_box'); 
 
elem.value += ' NEW';

<input class="mylivechat_prechat_name_box mylivechat_prechat_box" type="text" value='OLD'/>