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";

然而，我收到错误

未捕获的TypeError：无法设置未定义的属性“值”

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

数组是基于零的，因此如果您阅读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'/>

getElementByClassName更改输入值

3 个答案: