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

Array's是从零开始的，所以如果您读取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 2

在您的代码中，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 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'/>