Попытка добавить имена в список и отправить в HTML - PullRequest
Новая
       10

Попытка добавить имена в список и отправить в HTML

0 голосов
/ 16 февраля 2019

Я работаю над простой веб-страницей со скриптом.Существует форма, в которой вы можете ввести имя, а затем отправить форму.После отправки скрипт должен прочитать значение, вставить имя в массив и добавить строку в абзац HTML прямо под ним.Каждый раз, когда вы отправляете новое имя, массив и отображаемый абзац должны становиться длиннее.Однако, когда я нажимаю «отправить», новое имя мигает в абзаце HTML на короткое время, прежде чем страница переходит в исходное состояние.Что не так с моим кодом здесь? 

<body>
  <div id="infoDiv">
    <form href="JavaScript:void(0)" onSubmit="appendName();">
      <fieldset>
        <legend>Enter names (no duplicates):</legend>
        <input type="text" id="guestName"><br>
        <input type="submit" value="Add name to guestlist"><br><br>
      </fieldset>
    </form>
    <p id="guest_roster">Current list:<br>Empty</p>

    <script>
      var guestNames = [];
      var guestList = "Current list:<br>";

      function appendName() {
        var latestGuest = document.getElementById("guestName").value;
        guestNames = guestNames.push(latestGuest);
        guestList = guestList + latestGuest + "<br>";
        document.getElementById("guest_roster").innerHTML = guestList;
      }
    </script>
</body>

Ответы [ 2 ]

0 голосов
/ 16 февраля 2019

Как сказал @ cb64, вы должны передать event и позвонить event.preventDefault().Вот несколько советов:

  • Предпочитайте использовать let/const, чтобы использовать var, который объявляет ваши переменные глобально
  • Сотрите поле после нажатия кнопки, установив его значение в''.
  • Не устанавливайте в массиве значение, возвращаемое Array.push(), просто вызовите push, это операция с мутацией, ваш массив будет обновлен.
  • Вместо добавленияимена в строку, просто присоедините массив, используя <br>.
  • Оберните ваш Empty в HTML-код на <span> и установите innnerHTML этого элемента вместо установки целого абзаца таквам не нужно переписывать Current list:. 

<body>
  <div id="infoDiv">
    <form href="JavaScript:void(0)" onSubmit="appendName(event);">
      <fieldset>
        <legend>Enter names (no duplicates):</legend>
        <input type="text" id="guestName"><br>
        <input type="submit" value="Add name to guestlist"><br><br>
      </fieldset>
    </form>
    <p>Current list:<br><span id="guest_roster">Empty</span></p>

    <script>
      const guestNames = [];

      function appendName(event) {
        event.preventDefault();
        const guestName = document.getElementById('guestName');
        const latestGuest = guestName.value;
        guestName.value = '';
        guestNames.push(latestGuest);
        document.getElementById('guest_roster').innerHTML = guestNames.join('<br>');
      }
    </script>
</body>
0 голосов
/ 16 февраля 2019

Вам просто нужно добавить event.preventDefault(); к вашей функции onSubmit.

Кроме того, когда вы продвигаетесь в массив, просто используйте guestNames.push(latestGuest);, не нужно использовать guestNames = guestNames.push(latestGuest);

Рабочаяфрагмент: 

<body>
  <div id="infoDiv">
    <form href="JavaScript:void(0)" onSubmit="appendName(event);">
      <fieldset>
        <legend>Enter names (no duplicates):</legend>
        <input type="text" id="guestName"><br>
        <input type="submit" value="Add name to guestlist"><br><br>
      </fieldset>
    </form>
    <p id="guest_roster">Current list:<br>Empty</p>

    <script>
      var guestNames = [];
      var guestList = "Current list:<br>";

      function appendName() {
      event.preventDefault();
        var latestGuest = document.getElementById("guestName").value;
        guestNames.push(latestGuest);
        guestList = guestList + latestGuest + "<br>";
        document.getElementById("guest_roster").innerHTML = guestList;
      }
    </script>
</body>
...