JavaScript getElementsByTagNameでvalue値を取得する

2023年5月20日

環境
Google Chrome　113.0.5672.127（Official Build

構文
変数 = document.getElementsByTagName(タグ名);

getElementsByTagNameは、タグ名(TagName)を指定して要素(HTMLCollection)を取得するメソッドです。

使用例

<!DOCTYPE html>
<html>
<body>

<input type="text" name="text1" value="赤" maxlength="5" />
<input type="text" name="text1" value="青" maxlength="5" />

<button onclick="myFunction()">確認</button>

<script>
function myFunction() {
  const textbox1 = document.getElementsByTagName("input");

  for (let i = 0; i < textbox1.length; i++) {
    alert(textbox1.item(i).value); //赤　青
  } 
}
</script>

</body>
</html>

説明
getElementsByTagName(“input")でinputの内容を取得します。
item(i)でinputのvalue値を取得します。

結果
「確認」ボタンを押下すると、「赤」、「青」が表示されます。

JavaScript

Posted by arkgame

関連記事: