web-dev-qa-db-ja.com

JavaScriptを介してクラスごとに値属性を変更する

次のHTMLがあります。

<input class="vertical-tabs-active-tab" type="hidden" value="account" name="tabs__active_tab">

「アカウント」の値を「yolo」に変更するJavaScriptが必要です。

私はこれを行うことができると思いました：

document.getElementsByClassName('vertical-tabs-active-tab').setAttribute("value", "yolo");

ただし、次のエラーが発生します。

document.getElementsByClassName(...).setAttribute is not a function

入力に「id」を追加できません。クラスに基づいて値を変更する必要があります。

javascripthtmlsetattributegetelementsbyclassname
9
Cagey215
document.getElementsByClassName('vertical-tabs-active-tab')[0].setAttribute("value", "yolo");

document.getElementsByClassNameは要素の配列を返し、変更する要素のインデックスを指定します。

15
tymeJV

これはあなたが望むことをするかもしれません：

var elms = document.getElementsByClassName('vertical-tabs-active-tab')
for (var i = 0; i < elms.length; i++) {
  if (elms[i].getAttribute("value") === "account"){
   elms[i].setAttribute("value", "yolo");
  }
}
7
Archangel33

getElement s ByClassNameは、要素のリスト/配列を返します。インデックスを介して要素を選択し、それに値を設定します。要素を反復することもできます。 getElementByIdは1つの要素のみを返します。

1
Anton Bessonov