getElementsByClassName 更改输入值答案

【问题标题】：getElementByClassName to change input valuegetElementsByClassName 更改输入值
【发布时间】：2016-06-29 14:11:20
【问题描述】：

我有一个 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";

但是，我得到了错误

未捕获的类型错误：无法设置未定义的属性“值”

【问题讨论】：

返回集合的索引从 0 开始。
您能描述一下您真正想要实现的目标吗？它并不完全清楚
嗨，Jamiec，是的，正在尝试更改表单的输入值 - 这是由先前加载的 javascript 包含/生成的。由于某些原因，我总是收到未定义的错误。
我显然在选择器上做错了，但我输入的正是 chrome 告诉我类名的内容：/
i = myClassName.length - 1; 试试这个

标签： javascript forms input getelementsbyclassname

【解决方案1】：

数组是从零开始的，所以如果您阅读length 并使用该索引，它会比最高元素多一。尝试读取数组边界之外的元素将返回undefined - 所以使用length-1：

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

【讨论】：

【解决方案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";

【讨论】：

【解决方案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';

&lt;input class="mylivechat_prechat_name_box mylivechat_prechat_box" type="text" value='OLD'/&gt;

【讨论】：

当关于问题的所有内容都表明他们想要 last 时，是什么让你认为他们想要 first 元素？