getElementByClassNameは入力値を変更します

Question

私は入力タグがJavaScriptによって含まれています。その結果、入力タグは次のようになります。私はinputタグの値の最後に変数を追加することができます任意の方法は

<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

を取得iは長さを保持しているためmyClassName[i]は、undefinedになります最大インデックス値は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を読み、そのインデックスを使用している場合、それは最高のより1つです素子。 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'/>