Javascript 函数将输入值添加到数组，然后在第 5 次提交后生成列表

Javascript function to add input value to an array then generate a list after 5th submission

本文关键字：提交 列表 后生 然后 输入 函数 添加 数组 Javascript      更新时间：2023-09-26

我正在为学校调试一个javascript函数，但已经卡住了。我相信我已经协调了所有语法错误和大多数逻辑错误（至少到了控制台中没有显示错误的地步），但代码仍然不起作用。

该函数需要从表单中获取输入值，在每次提交后将其存储到数组中，然后在第五次提交后显示已输入的所有五个值的列表。

我有一种感觉，阻止执行的最终错误在循环中的某个地方，这是我迄今为止编程中最弱的游戏。我知道在这里发布基于学校的作业有点失礼，但我现在无处可去。我也不一定只是在寻找答案，只是希望有人能引导我朝着正确的方向前进，因为我想真正获得理解。

包含函数和我当前更改的文档的 html 是

<!DOCTYPE html>
<html>
<head>
   <!--
      Filename: index.htm
   -->
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Hands-on Project 4-3</title>
   <link rel="stylesheet" href="styles.css" />
   <script src="modernizr.custom.05819.js"></script>
</head>
<body>
   <header>
      <h1>
         Hands-on Project 4-3
      </h1>
   </header>
   <article>
      <div id="results">
          <p id="resultsExpl"></p>
          <ul>
             <li id="item1"></li>
             <li id="item2"></li>
             <li id="item3"></li>
             <li id="item4"></li>
             <li id="item5"></li>
          </ul>
      </div>
      <form onsubmit="processInput();">
          <fieldset>
            <label for="placeBox" id="placeLabel">
              Type the name of a place, then click Submit:
            </label>
            <input type="text" id="placeBox" />
          </fieldset>
          <fieldset>
            <button type="button" id="button" >Submit</button>
          </fieldset>
      </form>
   </article>
   <script>
        var places = []; // new array to store entered places
        var i = 0; // counter variable to track array indexes
      // function to add input to array and then generate list after 5th submission
      function processInput() {

         places[i] = document.getElementById("placeBox").value; // add entered value to array
//         document.getElementById("placeBox").value = ""; // clear text box
         if (i < 5) { // iterate counter variable
            i++;
         }
         else { // add entered value to array and write results to document
            document.getElementById("resultsExpl").innerHTML = "You entered the following places:";
            for (j = 0; j < 5; j++) { // write each array element to its corresponding list item
               var listItem = "item" + j;
               document.getElementById("resultsExpl").innerHTML = places[j];
            }
          }
      }
      // add backward compatible event listener to Submit button
      var submitButton = document.getElementById("button");
      if (submitButton.addEventListener) {
        submitButton.addEventListener("click", processInput, false);
      } else if (submitButton.attachEvent)  {
        submitButton.attachEvent("onclick", processInput);
      }

   </script>
</body>
</html>

谢谢！

编辑：将var places = [];和var i移动到函数外部，并将var i和var j设置为等于"0"。注释掉document.getElementById("placeBox").value = "";，似乎该行不是必需的。但是，该功能仍然无法正常工作或真正执行它出现的任何事情。

一些指针

  1. 每次运行函数时都会重新创建places数组，每次单击按钮时都会重新创建。将变量的声明 （ var places = [] ） 移到函数之外。

  2. 您的i变量也每次都重置为 1，并且数组从零开始（从零开始i）。同上 - 在函数外部声明它。

  3. 变量listItem似乎没有任何用处。

  4. （次要）不要重复自己！将document.getElementById("placeBox")的结果存储在变量中并重复使用。

编辑：

  1. 从元素周围删除<form>，它将具有提交页面的效果，这是您不想要的。

    2. 您

  2. 只是将最后一项附加到输出中，因为您每次都会覆盖它 - 更改为document.getElementById("resultsExpl").innerHTML += places[j];（请注意从 = 到 += 的更改）。或者，使用变量listItem来定位正确的<li>（请记住从item0开始li元素）。

下面的工作示例。

var places = []; // new array to store entered places
var i = 0; // counter variable to track array indexes
// function to add input to array and then generate list after 5th submission
function processInput() {
  places[i] = document.getElementById("placeBox").value; // add entered value to array
  if (i < 4) { // iterate counter variable
    i++;
  }
  else { // add entered value to array and write results to document
    document.getElementById("resultsExpl").innerHTML = "You entered the following places:";
    for (j = 0; j < 5; j++) { // write each array element to its corresponding list item
      var listItem = "item" + j;
      document.getElementById(listItem).innerHTML = places[j];
    }
  }
}
// add backward compatible event listener to Submit button
var submitButton = document.getElementById("button");
if (submitButton.addEventListener) {
  submitButton.addEventListener("click", processInput, false);
} else if (submitButton.attachEvent)  {
  submitButton.attachEvent("onclick", processInput);
}
<header>
      <h1>
         Hands-on Project 4-3
      </h1>
   </header>
   <article>
      <div id="results">
          <p id="resultsExpl"></p>
          <ul>
             <li id="item0"></li>
             <li id="item1"></li>
             <li id="item2"></li>
             <li id="item3"></li>
             <li id="item4"></li>
          </ul>
      </div>
      <form>
          <fieldset>
            <label for="placeBox" id="placeLabel">
              Type the name of a place, then click Submit:
            </label>
            <input type="text" id="placeBox" />
          </fieldset>
          <fieldset>
            <button type="button" id="button" >Submit</button>
          </fieldset>
      </form>
   </article>

有一刻我注意到了。你们决定删除这一行，但是如果没有这一行，提交按钮就无法正常工作。

document.getElementById("placeBox").value = "";

我试图保留它并将其移动到 i++; *（不知道它现在是否正常工作）

此外，我做了 i 和 j <4，因为我们现在从 0 开始，只需要 5 个响应。

相关文章：