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

Question

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

<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>

Answer 1

这是您的问题的工作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>

Answer 2

对我来说，这并不是很有效，所以我修改了你的代码到这个工作的例子。每个输入按顺序填充<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>

Answer 3

我会尝试列出您的代码中的一些问题：

1. 使用script属性定义src标记，并以内联方式编写代码，这将无法正常工作
2. 定义一些全局变量，虽然这不是一个bug，但这是一个非常糟糕的设计
3. 将变量listItem声明为空字符串，然后使用其第一个字符递增Number，我没有意识到您要在这里做什么。
4. 然后，您将未定义/未声明的toolBox变量设置为listItem字符串
5. 并且，毕竟，您将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>

Answer 4

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>