I'm trying to display the user input through the submit button. The user will input tool types and then the first five inputs will be displayed in the li's. Then as the limit of 5 tools is reached, another function prints 'Thanks for your suggestions'. However, I can't get the function to print out any of the user input for suggested tools. Could someone help me understand why they aren't printing out?

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

I'm trying to display the user input through the submit button. The user will input tool types and then the first five inputs will be displayed in the li's. Then as the limit of 5 tools is reached, another function prints 'Thanks for your suggestions'. However, I can't get the function to print out any of the user input for suggested tools. Could someone help me understand why they aren't printing out?

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

• javascript
• html

Share Improve this question Follow asked Oct 1, 2015 at 0:19 Seth SpiveySeth Spivey 36722 gold badges77 silver badges2323 bronze badges 3

• I presume you're not using jQuery? – ddsnowboard Commented Oct 1, 2015 at 0:24
• Note that you have: <script src="modernizr.custom.05819.js"> which will cause the content of the script element to be ignored. – RobG Commented Oct 1, 2015 at 2:52
• @RobG, I'm running the code through that external file. Just put in all in together for the sake of space! I should have taken that off for example's sake. – Seth Spivey Commented Oct 2, 2015 at 1:05

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Here's the working DEMO to your problem.

I have removed the button type as submit because in some browsers instead of calling the function processInput it will submit the form.

Here is my JavaScript that I changed,

   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>';
}

The only change I made to your HTML code was to add formId as the id for your form.

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

For me not much of this was working so I modified your code a bit to this working example. Each input fills in the <li> fields in order. On the 5th entry, you get alerted, and on the reset button the <li>'s are blanked out. Was not sure if this is what you were going for specifically but it sounded like it

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>

I'll try to list some of the problems you have into your code:

1. Defining a script tag with the src attribute, and writing code inline, this will never work
2. Defining some global variables, and although this isn't a bug, it's a really bad design
3. Declaring a variable listItem as an empty string, and then using its 1st character to increment a Number, I don't realize exactly what you're trying to do here.
4. Then, you set an undefined/undeclared toolBox variable to the listItem string
5. And, afterall, you add a click event handler to the submit button, but to an undefined callback

---

Well, since your code doesn't make much sense for me, but I think I got what you're trying to achieve, I've made an example of your code updated, and you can check the full mented code below:

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

A little tidied up version of Saumil Soni's post:

    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>