文章/答案/技术大牛

发布

社区首页 >问答首页 >函数将输入值添加到数组中，然后在第五次提交后生成列表。

问函数将输入值添加到数组中，然后在第五次提交后生成列表。
EN

Stack Overflow用户

提问于 2016-02-24 14:44:28

回答 2查看 1.4K关注 0票数 0

我正在为学校调试一个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 = "";，这一行似乎没有必要。然而，该函数仍然不能正常工作或真正地执行它所显示的任何操作。

javascript

arrays

loops

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-02-24 14:52:00

几点建议

每次运行函数时，即每次单击按钮时，都会重新创建places数组。将变量(var places = [])的声明移出函数之外。
每次都会将i变量重置为1，并且数组是基于零的(从零开始i )。和上面一样-在函数之外声明它。
变量listItem似乎没有任何用途。
(小调)不要重复！将document.getElementById("placeBox")的结果存储在变量中并重用它。

编辑：

从您的元素周围删除<form>，它将产生提交页面的效果，这是您不想要的。
您只是将最后一项附加到输出中，因为每次都要覆盖它--更改为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>

票数 1

Stack Overflow用户

发布于 2018-02-25 01:52:20

刚才我注意到了。你们决定取消这一行，但是没有这一行，提交按钮的效果就不太好了。

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

我试着保存它，并将它移到i++; *下(不知道它现在是否起作用)

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35605228

复制

相似问题

问函数将输入值添加到数组中，然后在第五次提交后生成列表。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问函数将输入值添加到数组中，然后在第五次提交后生成列表。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问函数将输入值添加到数组中，然后在第五次提交后生成列表。
EN