JavaScript实现愿望单录入时变量i自增1的代码问题求助

存在的错误 #

• ID大小写不匹配：输入框的ID属性为wishList（L大写），但清空输入框的代码中使用的是wishlist（l小写），无法匹配到对应元素，会导致输入框无法正常清空，控制台抛出元素不存在的错误。
• 自增语法错误：你编写的i =+1是赋值操作，作用是将正数1赋值给i，并不会实现i累加的效果，这会导致每次点击都只会填充第一个列表项，不会向后依次填充。正确的累加写法为i += 1或者i++。
• 变量未显式声明：i和listitem两个变量没有使用var/let关键字声明，属于隐式全局变量，容易引发全局变量污染，虽然不影响功能执行，但不符合JavaScript编码规范。

修正后代码 #

<body>
   <header>
      <h1>
         Project 2 Test 1
      </h1>
   </header>

   <article>
      <div id="results">
          <ul>
             <li id="item1"></li>
             <li id="item2"></li>
             <li id="item3"></li>
             <li id="item4"></li>
             <li id="item5"></li>
          </ul>
          <p id="resultsExp"></p>
      </div>
      <form>
          <fieldset>
            <label for="wishList" id="placeLabel">
              Type the name of a wish list item, then click Submit:
            </label>
            <input type="text" id="wishList" />
          </fieldset>
          <fieldset>
            <button type="button" id="button">Submit</button>
          </fieldset>
      </form>
   </article>
   <script>
      var i = 1;
      var listitem = "";
      function processitems() {
         if (i<= 5) {
            listitem ="item" +i;
            document.getElementById(listitem).innerHTML = document.getElementById("wishList").value;
            document.getElementById("wishList").value ="";
            if (i===5) {
               document.getElementById("resultsExp").innerHTML = "Your wish list has been submitted";
            }
            i += 1;
         }
      }
      var btn = document.getElementById("button");
      if (btn.addEventListener) {
         btn.addEventListener("click", processitems, false);
      } else if (btn.attachEvent) {
         btn.attachEvent("onclick", processitems);
      }
   </script>

内容的提问来源于stack exchange，提问作者Panoply