Program to make a list of inputs is not working-CodePudding

I want to write a program (JS/HTML) which makes a list out of inputs. If I input the things and press Enter the program is carried out, but my inputs are not shown. To be more precise, the inputs are shown for a moment, but it disappears quickly. Like it glitchesaway. I am a beginner programmer and I just can't find the problem. I would appreciate every attempt for help.

function addLebensmittelAndDatum() {
  foodsdate.innerHTML  = `
                <li >
                  <span >
                      ${lebensmittelfield.value}
                  </span>
                  <span >
                      ${datumfields.value}
                  </span>
                </li>
                    `;

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

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

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

<div >
  <header >
    <div >
      <!-- Title -->
      <span >Kühlflex</span>
      <!-- Add spacer, to align navigation to the right -->
      <div ></div>
      <!-- Navigation. We hide it in small screens. -->
    </div>
  </header>
  <main >
    <div >
      <!-- Your content goes here -->

      <form onsubmit="addLebensmittelAndDatum()">
        <div >
          <input  type="text" id="lebensmittelfield">
          <label  for="lebensmittelfield">Deine Lebensmittel...</label>
        </div>

        <div >
          <input  type="text" pattern="-?[0-9 .]*(\.[0-9 .] )?" id="datumfields">
          <label  for="datumfields">Datum...</label>
          <span >Datum eingeben!</span>
        </div>

        <button type="submit" >
                        Hinzufügen
                      </button>
      </form>


      <ul  id="foodsdate">

      </ul>

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

CodePudding user response：

I think you are about to say that the page is refreshing. So that the content disappears.

You can return false in the onsubmit handler to prevent submitting the form.

Refer: https://stackoverflow.com/a/71011158/11566161

Try this,

function addLebensmittelAndDatum(event) {
  foodsdate.innerHTML  = `
                <li >
                  <span >
                      ${lebensmittelfield.value}
                  </span>
                  <span >
                      ${datumfields.value}
                  </span>
                </li>
                    `;

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

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

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

<div >
  <header >
    <div >
      <!-- Title -->
      <span >Kühlflex</span>
      <!-- Add spacer, to align navigation to the right -->
      <div ></div>
      <!-- Navigation. We hide it in small screens. -->
    </div>
  </header>
  <main >
    <div >
      <!-- Your content goes here -->

      <form onsubmit="return addLebensmittelAndDatum()">
        <div >
          <input  type="text" id="lebensmittelfield">
          <label  for="lebensmittelfield">Deine Lebensmittel...</label>
        </div>

        <div >
          <input  type="text" pattern="-?[0-9 .]*(\.[0-9 .] )?" id="datumfields">
          <label  for="datumfields">Datum...</label>
          <span >Datum eingeben!</span>
        </div>

        <button type="submit" >
                        Hinzufügen
                      </button>
      </form>


      <ul  id="foodsdate">

      </ul>

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