尝试将姓名添加到列表并发送至 HTML

Question

我正在使用脚本开发一个简单的网页。有一个表格，您可以在其中输入姓名，然后提交表格。提交后，脚本应读取值，将名称推送到数组，并将字符串添加到其正下方的 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>

Answer 1

您只需将 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>

Answer 2

正如@cb64 所说，您必须通过 event 并调用 event.preventDefault()。不过这里有一些建议。

宁愿使用 let/const 而不是使用 var 全局声明你的变量
通过将其值设置为 '' 单击按钮后擦除该字段。
不要将你的数组设置为Array.push()的return，只需调用push，这是一个变异操作，你的数组将被更新。
无需将名称附加到字符串，只需使用 <br>.
用 <span> 将 Empty 包裹在 HTML 中并设置此元素的 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>

尝试将姓名添加到列表并发送至 HTML

Trying to add names to a list and send to HTML

html

javascript

submit