Program to make a list of inputs is not working

Question

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 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>

I highly advise against using non-English variable and method names. What is even worse is mixing English and non-English like your code does. — connexo, Oct 12 '22 at 07:22
Thanks for the advise. I'll change the variables to english ones. — ago, Oct 12 '22 at 13:00

score 1 · Accepted Answer · answered Oct 12 '22 at 07:17

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 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>

Program to make a list of inputs is not working

1 Answers1