53282


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

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

例えば

[code]

    <button id="edit" onclick="editBtn()"></button>
    
[/code]

と統一して、

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

[code]

      <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>
    
[/code]

javascript

[code]

    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>';
      }
    }
    
[/code]


CC BY-SA 4.0
2019-03-07T13:42:28.987
53280
2019-03-07T23:21:50.160
2019-03-07T14:48:21.097
3475
32404
question
javascript html5
親にidをつけてonclickで子の要素を変化させたい


呼び出し方法を統一したい場合は、関数内でid等を判定して個別の処理を行うか、どこからかデータを持ってくる必要があります。状況にもよりますが、自分なら後者にして、`data-*`
属性を使います。

[code]

    function editBtn(button) {
      const formArea = button.parentNode.previousElementSibling;
      const label = escape(formArea.dataset.label);
      if (!formArea.hasChildNodes() || formArea.firstElementChild.nodeName != 'SPAN') {
        formArea.innerHTML = `<span>${label}</span>`;
        button.textContent = '編集';
      } else {
        formArea.innerHTML = `<input id="${escape(formArea.dataset.controlId)}" placeholder="${label}" type="text">`;
        button.textContent = '完了';
      }
    }
    
    function escape(str) {
      str = str.replace('&', '&amp;');
      str = str.replace('<', '&lt;');
      str = str.replace('"', '&quot;');
      return str.replace('\'', '&apos;');
    }
    
    // 初期化
    editBtn(document.getElementById('edit1'));
    editBtn(document.getElementById('edit2'));
    editBtn(document.getElementById('edit3'));
[/code]

[code]

    <div class="form-wrap">
      <div class="form-area" data-label="名前" data-control-id="name"></div>
      <div class="edit-area">
        <button id="edit1" onclick="editBtn(this)" type=button></button>
      </div>
    </div>
    
    <div class="form-wrap">
      <div class="form-area" data-label="住所" data-control-id="address"></div>
      <div class="edit-area">
        <button id="edit2" onclick="editBtn(this)" type=button></button>
      </div>
    </div>
    
    <div class="form-wrap">
      <div class="form-area" data-label="メールアドレス" data-control-id="email"></div>
      <div class="edit-area">
        <button id="edit3" onclick="editBtn(this)" type=button></button>
      </div>
    </div>
[/code]


CC BY-SA 4.0
2019-03-07T16:10:31.130
53282
2019-03-07T23:21:50.160
2019-03-07T23:21:50.160
3475
3475
53280
answer