如何用Javascript函数显示用户输入

这是解决您的问题的DEMO。

我已经将按钮类型删除为submit，因为在某些浏览器中，它将提交表单，而不是调用processInput函数。

这是我修改的JavaScript，

   var count=1;
function processInput(){
    var tool = document.getElementById("toolBox").value;
    document.getElementById("toolBox").value = "";
    if(count==5){
        document.getElementById("resultsExpl").innerHTML = "Thanks for your suggestions";
        document.getElementById("item"+count).innerHTML = tool;
    }else{
        document.getElementById("item"+count).innerHTML = tool;
        count++;
    }
}
 function resetForm(){
    document.getElementById("results").innerHTML = '<ul><li id="item1"></li><li id="item2"></li><li id="item3"></li><li id="item4"></li><li id="item5"></li><p id="resultsExpl"></p></ul>';
}

我对你的HTML代码所做的唯一改变是添加formId作为id的形式。

<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="resultsExpl"></p>
  </div>
<form id="formId">
      <fieldset>
        <label for="toolBox" id="placeLabel">
          Type the name of a tool, then click Submit:
        </label>
        <input type="text" id="toolBox"/>
      </fieldset>
      <fieldset>
        <button type="button" id="button" onclick="processInput()">Submit</button>
        <button type="button" id ="reset" onclick="resetForm()"/>Reset</button>
      </fieldset>
  </form>

对于我来说，这不是太多的工作，所以我修改了你的代码一点到这个工作的例子。每个输入按顺序填充<li>字段。在第5个条目中，你得到警报，在重置按钮上<li>被取消。我不确定这是不是你想要的但听起来像是

var i = 1;
function processInput() {
    if (i <= 5) {
        document.getElementById('item' + i).innerHTML = document.getElementById('toolBox').value;
        document.getElementById('toolBox').value = '';
        if (i == 5) {
            alert('Thank you for your suggestions');
        } else {
            i++;
        }
    }
}
function resetForm() {
    while (i >= 1) {
        document.getElementById('item' + i).innerHTML = '';
        i--;
    }
    i = 1;
}

<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="resultsExpl"></p>
      </div>
      <form>
          <fieldset>
            <label for="toolBox" id="placeLabel">
              Type the name of a tool, then click Submit:
            </label>
            <input type="text" id="toolBox"/>
          </fieldset>
          <fieldset>
            <button type="button" id="button" onclick="processInput()">Submit</button>
            <button type="button" id ="reset" onclick="resetForm()"/>Reset</button>
          </fieldset>
      </form>

我将尝试列出一些您在代码中遇到的问题:

1. 使用src属性定义script标签，并内联编写代码，这将永远不起作用
2. 定义了一些全局变量，虽然这不是一个bug，但这是一个非常糟糕的设计
3. 将变量listItem声明为空字符串，然后使用它的第一个字符来增加Number，我不知道你在这里想做什么。
然后，将未定义/未声明的toolBox变量设置为listItem字符串
4. 最后，您将click事件处理程序添加到submit按钮，但添加到未定义的回调

嗯，因为你的代码对我来说没有多大意义，但我想我得到了你想要达到的目标，我已经更新了你的代码的一个例子，你可以检查下面的完整注释代码:

/* we encapsulate your hole code into an IIFE (Immediately-Invoked Function Expression)
   the goal here is to not polute the global scope, so the variable declarations reside inside it */
(function(d) {
  /* that's the counter you already had, I renamed it from i to item */
  var item = 1;
  
  /* we cache all the elements we're going to use here, by getting them by id */
  var txt = d.getElementById('toolBox'),
      btn = d.getElementById('button'),
      reset = d.getElementById('reset'),
      results = d.getElementById('results'),
      resultsExpl = d.getElementById('resultsExpl');
  
  /* we add the 'click' event handlers to our buttons
     it's better than puting directly inside the HTML, because it's a better design
     this approach is known as Unobstrusive Javascript */
  btn.addEventListener('click', processInput);
  reset.addEventListener('click', resetForm);
  /* your processInput function, with the same logic you had, but fixed */
  function processInput() {
    if (item <= 5) {
      /* here, we get the li tag by its id, concatenating the string 'item' to our variable item */
      var li = d.getElementById('item' + item);
      /* we must use the property textContent to change the text of the li
         and we get the user's input by getting its property value */
      li.textContent = txt.value;
      /* then, we increment our counter. the code below is the same as item += 1 */
      item++;
    }
    /* if the last item was inserted, we show our message */
    if (item > 5) {
      resultsExpl.textContent = 'Thanks for your suggestions';
    }
  }
  function resetForm() {
    /* to reset our form, firstly I loop through all the lis inside the div results */
    [].forEach.call(results.querySelectorAll('li'), function(el, i) {
      /* and I change each li textContent property to an empty string */
      el.textContent = '';
    });
    
    /* then, we set our input's value to empty, and we also reset our item variable to 1 */
    txt.value = '';    
    item = 1;
  }
})(document); /* I'm passing the document as a parameter, so I can use inside the IIFE as the variable d */

<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="resultsExpl"></p>
</div>
<form>
  <fieldset>
    <label for="toolBox" id="placeLabel">
      Type the name of a tool, then click Submit:
    </label>
    <input type="text" id="toolBox" />
  </fieldset>
  <fieldset>
    <button type="submit" id="button">Submit</button>
    <button type="button" id="reset">Reset</button>
  </fieldset>
</form>

整理后的Saumil Soni的帖子:

    var count=1;
    var done;
    function processInput(){
        var tool = document.getElementById("toolBox").value;
        if (done!=1) {
          document.getElementById("toolBox").value = "";
        }
        if(count==5){
            if (done!=1) {
              document.getElementById("resultsExpl").innerHTML = "Thanks for your suggestions";
              document.getElementById("item"+count).innerHTML = tool;
              done = 1;
            }
        }else{
            if (done!=1) {
              document.getElementById("item"+count).innerHTML = tool;
              count++;
            }
        }
    }
    function resetForm() {
      location.reload();
    }

<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="resultsExpl"></p>
  </div>
<form id="formId" onSubmit="processInput(); return false;">
      <fieldset>
        <label for="toolBox" id="placeLabel">
          Type the name of a tool, then click Submit:
        </label>
        <input type="text" id="toolBox"/>
      </fieldset>
      <fieldset>
        <button type="button" id="button" onclick="processInput()">Submit</button>
        <button type="button" id ="reset" onclick="resetForm()"/>Reset</button>
      </fieldset>
  </form>