Question

我是学生，这是我的JavaScript课程的家庭作业，我必须使下面的代码工作，它应该从用户输入五个位置并将它们分配给一个数组。然后将其显示在页面上的列表中。当我开始它不起作用。它目前只需要4个条目，只显示列表中的前3个。它应该需要5个条目并显示5个条目。我试图改变迭代计数器的if语句，但它仍然只需要4个位置。我怀疑某些东西是乱序的，或者编号不正确。任何帮助将不胜感激！

<!DOCTYPE html>
<html>
<head>
   <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>
          <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" onclick="processInput()">Submit</button>
          </fieldset>
      </form>
   </article>
   <script>
      var places = []; // new array to store entered places
      var i = 1; // 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 < 6) { // iterate counter variable
            ++i;
         }
         else { // add entered value to array and write results to document
            document.getElementById("resultsExpl").innerHTML = "You entered the following places:";
            var listItem = "";
            for (j = 1; j < 6; j++) { // write each array element to its corresponding list item
               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);
      }
      }
   </script>
</body>
</html>

Answer 1

我看到了几个问题。每次点击提交按钮时，processInput()运行两次的最大问题可能是绊倒你。

首先，您指定一个内联HTML本身的事件处理程序：

<button type="button" id="button" onclick="processInput()">Submit</button>

onclick="processInput()"在分析HTML时分配该单击处理程序。所以稍后当你这样做时：

  // 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);
  }
  }

您实际上已将另一个重复的事件处理程序添加到按钮onclick，导致processInput()每次点击都会运行两次。这会导致数组填充一些意外的值。

另一个问题是上面的代码块（在JavaScript中添加事件监听器）是processInput()本身的。所以这就是：

HTML将事件监听器添加到onclick。
第一次点击按钮时，processInput()会运行一次。 processInput()向onclick添加了重复的事件监听器。
后续按钮点击两次点击processInput();一次来自HTML，一次来自JavaScript。

总之，选择一个或另一个。要么在HTML中内联添加事件侦听器，要么在JavaScript中添加，而不是两者都用。如果你在JS中这样做，当然要确保添加事件监听器的代码不在它添加的函数内部。把它放在全球范围内。

我看到还有其他几个小问题，但是一旦解决了事件监听器问题，你应该能够解决它们。提示：在调试代码时，在某些地方添加console.log()会很有帮助，这样您就可以看到变量的状态并找出出错的地方。

JavaScript帮助，将用户输入值分配给数组，然后分配给UL

1 个答案: