JavaScript getElementsByTagNameでvalue値を取得する

環境
Google Chrome 113.0.5672.127(Official Build

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

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

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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