Question

您好，我正在建立一个通讯录，您可以在其中添加和编辑通讯录。现在，我希望“编辑”按钮打开一个模式，您可以在其中更改联系人并保存。为什么在打开时不能与document.getElementById("name").value = kontakt.name;一起以模态获取现有联系人的数据？使用html站点之前，它可以工作。因此语法没有问题

我有这个模态

  <div class="container">
                <h2></h2>


                <!-- The Modal -->
                <div class="modal" id="dialog">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">Kontakt erstellen</h4>
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                            </div>

                            <div class="modal-body">
                                <div class="container">

                                    <form>
                                        <div class="form-group row">
                                                    <label for="name" class="col-sm-2 col-form-label">Name</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" class="form-label" placeholder="Name" id="name">
                                                    </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="email" class="col-sm-2 col-form-label">E-Mail</label>
                                            <div class="col-sm-10">
                                                <input type="email" class="form-label" placeholder="E-Mail" id="email">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="plz" class="col-sm-2 col-form-label">PLZ</label>
                                            <div class="col-sm-10">
                                                <input type="number" class="form-label" placeholder="PLZ" id="plz">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                                <label for="ort" class="col-sm-2 col-form-label">Ort</label>
                                                <div class="col-sm-10">
                                                    <input type="text" class="form-label" id="ort" placeholder="Ort">
                                                </div>
                                            </div>
                                        <div class="form-group row">
                                            <label for="strasse" class="col-sm-2 col-form-label">Strasse und Hausnummer</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-label" id="strasse" placeholder="Strasse und Hausnummer">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary btn-block" onclick="login()" >Speichern</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

这是在表格中为每个新联系人创建的编辑按钮

// edit button
var button = document.createElement('button');
button.onclick = function() {
    Initialize(kontakt.id);
    $('#dialog').modal('show');

这是初始化函数，应将联系人数据放在空白字段中。错误来自这里。它说TypeError：document.getElementById（...）为空

function kontaktBearbeitenInit(id) {

    let kontakt = kontakteSpeicher.findContacttoId(id);

    document.getElementById("name").disabled = true;
    document.getElementById("name").value = kontakt.name;
    document.getElementById("email").value = kontakt.email;
    document.getElementById("Ort").value = kontakt.ort;
    document.getElementById("plz").value = kontakt.plz;
    document.getElementById("strasse").value = kontakt.strasse;

}

Answer 1

尝试替换

document.getElementById("Ort").value = kontakt.ort;

到

document.getElementById("ort").value = kontakt.ort;

const container = document.getElementsByClassName('container')[0];
var button = document.createElement('button');
container.appendChild(button);
button.innerHTML = 'Create';
button.classList.add('btn', 'btn-primary');
button.onclick = function() {
    $('#dialog').show();
    Initialize();
}

function closeModal() {
    $('#dialog').hide();
}

function Initialize() {

    let kontakt = {
      name: 'John',
      email: 'test@example.com',
      ort: 'ort',
      plz: 'plz',
      strasse: 'strasse'
    }
    document.getElementById("name").disabled = true;
    document.getElementById("name").value = kontakt.name;
    document.getElementById("email").value = kontakt.email;
    document.getElementById("ort").value = kontakt.ort;
    document.getElementById("plz").value = kontakt.plz;
    document.getElementById("strasse").value = kontakt.strasse;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <h2></h2>

  <!-- The Modal -->
  <div class="modal" id="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Kontakt erstellen</h4>
          <button type="button" class="close" data-dismiss="modal" onclick="closeModal()">&times;</button>
        </div>

        <div class="modal-body">
          <div class="container">

            <form>
              <div class="form-group row">
                <label for="name" class="col-sm-2 col-form-label">Name</label>
                <div class="col-sm-10">
                  <input type="text" class="form-label" placeholder="Name" id="name">
                </div>
              </div>
              <div class="form-group row">
                <label for="email" class="col-sm-2 col-form-label">E-Mail</label>
                <div class="col-sm-10">
                  <input type="email" class="form-label" placeholder="E-Mail" id="email">
                </div>
              </div>
              <div class="form-group row">
                <label for="plz" class="col-sm-2 col-form-label">PLZ</label>
                <div class="col-sm-10">
                  <input type="number" class="form-label" placeholder="PLZ" id="plz">
                </div>
              </div>
              <div class="form-group row">
                <label for="ort" class="col-sm-2 col-form-label">Ort</label>
                <div class="col-sm-10">
                  <input type="text" class="form-label" id="ort" placeholder="Ort">
                </div>
              </div>
              <div class="form-group row">
                <label for="strasse" class="col-sm-2 col-form-label">Strasse und Hausnummer</label>
                <div class="col-sm-10">
                  <input type="text" class="form-label" id="strasse" placeholder="Strasse und Hausnummer">
                </div>
              </div>
            </form>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-primary btn-block" onclick="login()">Speichern</button>
        </div>
      </div>
    </div>
  </div>

</div>

打开时如何用现有联系人填充模态字段？

1 个答案: