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

我试图通过提交按钮显示用户输入。用户将输入刀具类型，然后前五个输入将显示在li中。然后，当达到5个工具的限制时，另一个函数将打印“感谢您的建议”。但是，我无法让函数打印出建议工具的任何用户输入。有人能帮我理解他们为什么不打印出来吗

<script src="modernizr.custom.05819.js">

var i = 1;
var listItem = "";

function processInput() {

  if (i <= 5) {

      listItem[0] += 1;
      listItem = toolBox;
      var toolBox = "";
      alert("This is running");

      if (i == 5) {
          var resultsExpl = "Thanks for your suggestions";
    }
  }
  var backSubmit = document.getElementById("button");

  if (backSubmit.addEventListener) {
    backSubmit.addEventListener("click", calcTotal, false);
  } else if (backsubmit.attachEvent) {
    backSubmit.attachEvent("onclick", calcTotal);
  }

}
</script>


<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" onclick="processInput()">Submit</button>
        <button type="button" id ="reset" onclick="resetForm()"/>Reset</button>
      </fieldset>
  </form>

var i=1；
var listItem=“”；
函数processInput（）{
如果（i这是解决你问题的方法

我删除了按钮类型
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>';
}

对我来说，这些都不起作用，所以我在这个工作示例中修改了您的代码。每个输入按顺序填写
字段。在第5个条目上，您会收到警报，在重置按钮上，
被清除。我不确定这是否是您要特别做的，但听起来很像


var i=1；
函数processInput（）{
如果（i=1）{
document.getElementById（'item'+i）.innerHTML=''；
我--；
}
i=1；
}









键入工具的名称，然后单击“提交”：
提交
重置
我将尝试在代码中列出您遇到的一些问题：

用
src
属性定义
script
标记，并内联编写代码，这是行不通的
定义一些全局变量，虽然这不是一个bug，但这是一个非常糟糕的设计
将变量
listItem
声明为空字符串，然后使用其第一个字符递增
Number
，我不知道您在这里到底想做什么
然后，将未定义/未声明的
工具箱
变量设置为
列表项
字符串
毕竟，您将一个
click
事件处理程序添加到
submit
按钮，但添加到一个未定义的回调

好吧，既然你的代码对我来说没有多大意义，但我想我已经达到了你想要达到的目标，我已经为你的代码更新了一个示例，你可以查看下面完整的注释代码：


/*我们将孔代码封装到IIFE（立即调用的函数表达式）中
这里的目标是不污染全局范围，因此变量声明驻留在其中*/
（职能（d）{
/*那是你已经有的计数器，我把它从I重命名为item*/
var项目=1；
/*我们通过id来缓存所有要在这里使用的元素*/
var txt=d.getElementById（'toolBox'），
btn=d.getElementById（'button'），
reset=d.getElementById（'reset'），
results=d.getElementById（'results'），
resultsExpl=d.getElementById（'resultsExpl'）；
/*我们将“单击”事件处理程序添加到按钮中
它比直接放在HTML中要好，因为它是一种更好的设计
这种方法称为非结构化Javascript*/
btn.addEventListener（'click'，processInput）；
reset.addEventListener（“单击”，resetForm）；
/*processInput函数，具有与您相同的逻辑，但已修复*/
函数processInput（）{
如果（项目有点整理索米尔·索尼的帖子：


var计数=1；
var-done；
函数processInput（）{
var工具=document.getElementById（“工具箱”）.value；
如果（完成！=1）{
document.getElementById（“工具箱”）.value=“”；
}
如果（计数=5）{
如果（完成！=1）{
document.getElementById（“ResultExpl”）.innerHTML=“感谢您的建议”；
document.getElementById（“item”+count）.innerHTML=tool；
完成=1；
}
}否则{
如果（完成！=1）{
document.getElementById（“item”+count）.innerHTML=tool；
计数++；
}
}
}
函数resetForm（）{
location.reload（）；
}









键入工具的名称，然后单击“提交”：
提交
重置
我猜您没有使用jQuery？请注意：
这会导致脚本元素的内容被忽略。@RobG，我正在通过该外部文件运行代码。为了节省空间，只需将所有内容放在一起！我应该去掉它。例如，这么多编辑lol。首先，它没有输入任何内容，n现在它替换了第5个字符，没有提示，重置按钮不起作用。Le叹气，只是说。这不是关于谁先回答，而是关于正确答案，最好是第一次。@Jesse嗯，当我的答案不完美时，我留下了一张“PS便条”，说我仍在完善它。OP不想提醒“谢谢你的建议”因为OP希望它打印id为“ResultExpl”的标记。OP没有提到任何关于重置表单的问题，所以我没有为该部分工作，但是既然你提到了，我将创建一个函数来重置liAh，我只是给你一段艰难的时间，你很好兄弟；）@Jesse我希望stackoverflow能给我们一些表情符号…哈哈…更新了答案，现在它也可以重新设置表单了。不过分。和OP一样的质量，你赢得了我的拇指支持
<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>