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'/>