動的に追加したテキストフォームに属性名を連番で付与する - Javascript

作成日：2025/03/16
最終更新日：2025/03/16

コード

複数のデータをまとめて登録や更新する際のサンプル

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
</head>
<body>
  <p><button id="addBtn" type="button">button</button></p>
  <p><button type="button" id="setAttrBtn">setAttribute</button></p>

  <div id="item">
    <p><input type="text" class="text"></p>
  </div>
</body>
</html>

script.js

window.onload = function() {
  let addBtn = document.getElementById('addBtn');
  let item = document.getElementById('item');
  let setAttrBtn = document.getElementById('setAttrBtn');

  addBtn.addEventListener('click', function(){
    item.innerHTML += '<p><input type="text" class="text"></p>';
  });

  setAttrBtn.addEventListener('click', function(){
    const inputElem = document.querySelectorAll('input[type="text"]');
    inputElem.forEach(function(value, index, text){
      value.setAttribute('name', 'item_' + (index + 1) );
    });
  })
}