【JavaScript】フォームの要素を取得する際、要素名に変数を設定する

JavaScript Web制作
<form name="myform">
  <input name="title" type="text">
</form>

たとえば、上記のフォームからinputのvalueを取得したい場合、

const value = document.forms.myform.title.value;

となりますが、関数化したい場合などでname属性の部分に変数を設定したいときは少し書き方が変わるようです。

// inputのname属性に変数を設定したい場合
const value = document.forms.myform[inputName].value;

// formのname属性にも変数を設定したい場合
const value = document.forms[formName][inputName].value;

.(ドット)を無くし[]の中に変数を設定することで要素を取得することができます。

タイトルとURLをコピーしました