javascript - 无法使用 javascript 修改 html？

Question

我在index.html页面做了3个div标签:

1) 带有 id="contactlist" 的 div 填充所有联系人列表

2) 带有 id="addnewcontact" 的 div 显示提交表单

3) 带有 id="editcontact" 的 div 显示用于编辑详细信息的表单

每当我点击 edit 按钮时，它都会显示编辑详细信息的表单，但是如果我点击右上角的添加按钮(见屏幕截图)，那么页面会显示 2 个表单编辑表单和添加新表单。

当我点击编辑按钮时，它应该只显示编辑表单，当我点击右上角的添加按钮时，它应该只显示添加新的联系表单。

要产生上述错误，请先点击编辑按钮，然后点击右上角的添加按钮。

index.html:

  <div id="contactlist" >

  </div>


  <div id="addnewcontact">


  </div>


  <div id="editcontact">

  </div>

在 app.js 中:

function editContact(id) {
    document.getElementById("search").style.display = 'none';
    document.getElementById("contactlist").style.display = 'none';
    document.getElementById("editcontact").style.display = '';
    document.getElementById("editcontact").innerHTML = 
        `
        <form>
          <div class="form-group">
            <label for="InputName">Name</label>
            <input type="text" class="form-control" id="inputName" aria-describedby="namehelp" value="`+array[id].fullName+`" >
          </div>
          <div class="form-group">
            <label for="InputNumber">Number</label>
            <input type="text" class="form-control" id="inputNumber" value="`+array[id].number+`">
          </div>
          <div class="form-group">
            <label for="InputGroup">Group</label>
            <input type="text" class="form-control" id="inputGroup" value="`+array[id].group+`">
          </div>
          <button type="submit" class="btn btn-primary" onclick="saveMe(`+id+`)">Submit</button>
        </form>
        `;
}


function addNew() {
    document.getElementById("search").style.display = 'none';
    document.getElementById("contactlist").style.display = 'none';
    document.getElementById("addnewcontact").style.display = '';
    document.getElementById("addnewcontact").innerHTML = 
    `
    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">Name</label>
        <input type="text" class="form-control" id="inputname" aria-describedby="namehelp" placeholder="Enter Name">
      </div>
       <div class="form-group">
        <label for="exampleInputEmail1">Number</label>
        <input type="text" class="form-control" id="inputnumber" aria-describedby="numberhelp" placeholder="Enter Number">
      </div>
      <div class="form-group">
        <label for="exampleInputEmail1">Group</label>
        <input type="text" class="form-control" id="inputgroup" aria-describedby="grouphelp" placeholder="Enter Group">
      </div>
      <button type="submit" class="btn btn-primary" onclick="submittoDB()">Submit</button>
    </form>
    `;
}


function showContacts() {
    for(var i in array){
        var id = i;
        contactlist.innerHTML +=
        `
        <ul>
        <div>
        <p>Name: `+ p1.fullName +`</p>
        <p>Number: `+ p1.number +`</p>
        <p>Group: `+ p1.group +`</p>
        <button type="button" class="btn btn-warning" onclick="editContact(`+ id +`)">Edit</button>
        <button type="button" class="btn btn-danger">Delete</button>
        </div>
        `
    }
}

showContacts();

Js fiddle 现场演示:https://jsfiddle.net/nca8xx6c/

Answer 1

function editContact(id) {
document.getElementById("search").style.display = 'none';
document.getElementById("contactlist").style.display = 'none';
document.getElementById("editcontact").style.display = '';
document.getElementById("addnewcontact").style.display = 'none';
document.getElementById("editcontact").innerHTML = 
    `
    <form>
      <div class="form-group">
        <label for="InputName">Name</label>
        <input type="text" class="form-control" id="inputName" aria-describedby="namehelp" value="`+array[id].fullName+`" >
      </div>
      <div class="form-group">
        <label for="InputNumber">Number</label>
        <input type="text" class="form-control" id="inputNumber" value="`+array[id].number+`">
      </div>
      <div class="form-group">
        <label for="InputGroup">Group</label>
        <input type="text" class="form-control" id="inputGroup" value="`+array[id].group+`">
      </div>
      <button type="submit" class="btn btn-primary" onclick="saveMe(`+id+`)">Submit</button>
    </form>
    `;
}


function addNew() {
    document.getElementById("search").style.display = 'none';
    document.getElementById("contactlist").style.display = 'none';
    document.getElementById("addnewcontact").style.display = '';
    document.getElementById("editcontact").style.display = 'none';
    document.getElementById("addnewcontact").innerHTML = 
`
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Name</label>
    <input type="text" class="form-control" id="inputname" aria-describedby="namehelp" placeholder="Enter Name">
  </div>
   <div class="form-group">
    <label for="exampleInputEmail1">Number</label>
    <input type="text" class="form-control" id="inputnumber" aria-describedby="numberhelp" placeholder="Enter Number">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Group</label>
    <input type="text" class="form-control" id="inputgroup" aria-describedby="grouphelp" placeholder="Enter Group">
  </div>
  <button type="submit" class="btn btn-primary" onclick="submittoDB()">Submit</button>
</form>
`;
}

试试这个代码片段!