Question

我在div页面中制作了3个index.html代码：

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 live demo：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>
`;
}

试试这段代码片段。

无法使用javascript修改html？

1 个答案: