【javascript】親にidをつけてonclickで子の要素を変化させたい

javascriptのより良い書き方を探しています。

フォームの各項目を個別編集できるようそれぞれボタンを設置して入力と表示を切り替えたいのですが、まとめて書ける良い方法はないでしょうか？
記載のソースようにそれぞれにidをつけて編集させるしかないでしょうか？

例えば
<button id="edit" onclick="editBtn()"></button>
と統一して、

id="name-form"内のonclickを押した時は、name-form内のid="form"内を書き換え
id="address-form"内のonclickを押した時は、address-form内のid="form"内を書き換え
id="email-form"内のonclickを押した時は、email-form内のid="form"内を書き換え

などと一括で書ける書き方があればご教示ください。
よろしくお願いいたします。

html

  <div class="form-wrap" id="name-form">
     <div class="form-area" id="form nameArea">
        <span>名前</span>
     </div>
     <div class="edit-area">
        <button id="edit1" onclick="editBtn1()"></button>
     </div>
  </div>
  <div class="form-wrap" id="address-form">
     <div class="form-area" id="form addressArea">
        <span>住所</span>
     </div>
     <div class="edit-area">
        <button id="edit2" onclick="editBtn2()"></button>
     </div>
  </div>
  <div class="form-wrap" id="email-form">
     <div class="form-area" id="form emailArea">
        <span>メールアドレス</span>
     </div>
     <div class="edit-area">
        <button id="edit3" onclick="editBtn3()">編集</button>
     </div>
  </div>

javascript

var clickNumber = 0;

// 名前
function editBtn1() {
  clickNumber++;
  if ((clickNumber%2)==0) {        
    document.getElementById("edit1")
    .innerHTML = '完了';
    document.getElementById("nameArea")
    .innerHTML = '<input id="name" placeholder="名前" type="text">';
  } else {
    document.getElementById("edit1")
    .innerHTML = '編集';
    document.getElementById("nameArea")
    .innerHTML = '<span>名前</span>';
  }
}
// 住所
function editBtn2() {
  clickNumber++;
  if ((clickNumber%2)==0) {        
    document.getElementById("edit2")
    .innerHTML = '完了';
    document.getElementById("addressArea")
    .innerHTML = '<input id="address" placeholder="住所" type="text">';
  } else {
    document.getElementById("edit2")
    .innerHTML = '編集';
    document.getElementById("addressArea")
    .innerHTML = '<span>名前</span>';
  }
}

// メールアドレス
function editBtn2() {
  clickNumber++;
  if ((clickNumber%2)==0) {        
    document.getElementById("edit3")
    .innerHTML = '完了';
    document.getElementById("emailArea")
    .innerHTML = '<input id="email" placeholder="メールアドレス" type="text">';
  } else {
    document.getElementById("edit3")
    .innerHTML = '編集';
    document.getElementById("emailArea")
    .innerHTML = '<span>名前</span>';
  }
}

行動規範の内容に同意します

回答1件

ベストアンサー

まず、id="form nameArea"のようにidに空白を入れることは出来ません。idは特に必要な箇所にのみつけるくらいでも良いと思います。

HTML
1<div class="form-wrap" id="name-form">
2  <div class="form-area" id="nameArea">
3    <span>名前</span>
4  </div>
5  <div class="edit-area">
6    <button class="edit">編集</button>
7  </div>
8</div>
9<div class="form-wrap" id="address-form">
10  <div class="form-area" id="addressArea">
11    <span>住所</span>
12  </div>
13  <div class="edit-area">
14    <button class="edit">編集</button>
15  </div>
16</div>
17<div class="form-wrap" id="email-form">
18  <div class="form-area" id="emailArea">
19    <span>メールアドレス</span>
20  </div>
21  <div class="edit-area">
22    <button class="edit">編集</button>
23  </div>
24</div>

js
1document.addEventListener( 'DOMContentLoaded' , _ => {
2  document.querySelectorAll( '.edit' ).forEach( ele => {
3    let flag = false;
4    const root = ele.closest( '.form-wrap' );
5    ele.addEventListener( 'click', e => {
6      flag = !flag;
7      root.querySelector( '.edit' ).innerText = flag ? '完了' : '編集';
8    }, false );
9  } );
10}, false ); // IE無視
11```**動くサンプル：**[https://jsfiddle.net/3yx742ft/2/](https://jsfiddle.net/3yx742ft/2/)
12
13---
14
15【[HTML, CSS, JavaScript] id名/class名に使用できる文字の種類 ・ GitHub】
16[https://gist.github.com/think49/d8fbcf7f1c743e21bc79bb7d16178cad](https://gist.github.com/think49/d8fbcf7f1c743e21bc79bb7d16178cad)
17
18【EventTarget.addEventListener() - Web API | MDN】
19[https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener)
20
21【Document.querySelectorAll() - Web API | MDN】
22[https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll](https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll)
23
24【Element.closest() - Web APIs | MDN】
25[https://developer.mozilla.org/en-US/docs/Web/API/Element/closest](https://developer.mozilla.org/en-US/docs/Web/API/Element/closest)