编制输入列表的程序不起作用。

Question

我想编写一个程序(JS/HTML)，它从输入中列出一个列表。如果我输入的东西和按回车程序是执行，但我的输入没有显示。更准确地说，输入被显示了一会儿，但它很快就消失了。喜欢它glitches走开。我是一个初学者程序员，我只是找不到问题。我很感激每一次寻求帮助的尝试。

​

function addLebensmittelAndDatum() {
  foodsdate.innerHTML += `
                <li class="mdl-list__item">
                  <span class="mdl-list__item-primary-content">
                      ${lebensmittelfield.value}
                  </span>
                  <span class="mdl-list__item-primary-content">
                      ${datumfields.value}
                  </span>
                </li>
                    `;

  lebensmittelfield.value += ``;
  datumfields.value += ``;
}

.demo-list-item {
  width: 300px;
}

.page-content {
  padding: 20px 100px;
}

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Kühlflex</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
    </div>
  </header>
  <main class="mdl-layout__content">
    <div class="page-content">
      <!-- Your content goes here -->

      <form onsubmit="addLebensmittelAndDatum()">
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text" id="lebensmittelfield">
          <label class="mdl-textfield__label" for="lebensmittelfield">Deine Lebensmittel...</label>
        </div>

        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text" pattern="-?[0-9+.]*(\.[0-9+.]+)?" id="datumfields">
          <label class="mdl-textfield__label" for="datumfields">Datum...</label>
          <span class="mdl-textfield__error">Datum eingeben!</span>
        </div>

        <button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
                        Hinzufügen
                      </button>
      </form>


      <ul class="demo-list-icon mdl-list" id="foodsdate">

      </ul>

    </div>
  </main>
</div>

​

Answer 1

我想你是要说这一页是令人耳目一新的。这样内容就消失了。

可以在return false处理程序中使用onsubmit来防止提交表单。

参考：https://stackoverflow.com/a/71011158/11566161

尝尝这个,

​

function addLebensmittelAndDatum(event) {
  foodsdate.innerHTML += `
                <li class="mdl-list__item">
                  <span class="mdl-list__item-primary-content">
                      ${lebensmittelfield.value}
                  </span>
                  <span class="mdl-list__item-primary-content">
                      ${datumfields.value}
                  </span>
                </li>
                    `;

  lebensmittelfield.value += ``;
  datumfields.value += ``;
  
  return false;
}

.demo-list-item {
  width: 300px;
}

.page-content {
  padding: 20px 100px;
}

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Kühlflex</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
    </div>
  </header>
  <main class="mdl-layout__content">
    <div class="page-content">
      <!-- Your content goes here -->

      <form onsubmit="return addLebensmittelAndDatum()">
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text" id="lebensmittelfield">
          <label class="mdl-textfield__label" for="lebensmittelfield">Deine Lebensmittel...</label>
        </div>

        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text" pattern="-?[0-9+.]*(\.[0-9+.]+)?" id="datumfields">
          <label class="mdl-textfield__label" for="datumfields">Datum...</label>
          <span class="mdl-textfield__error">Datum eingeben!</span>
        </div>

        <button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
                        Hinzufügen
                      </button>
      </form>


      <ul class="demo-list-icon mdl-list" id="foodsdate">

      </ul>

    </div>
  </main>
</div>

​