Get Items from Textbox to Display after clicking submit

Question

I am trying to get information that I type into a textbox to display in the unordered list I have in my code to the browser. I am also trying to have it display a message after I input 5 items. Please see my code below.

<!DOCTYPE html>
<html>
<head>

   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <title>Hands-on Project 3-4</title>
   <link rel="stylesheet" href="styles.css" />
   <script src="modernizr.custom.05819.js"></script>
</head>

<body>
   <header>
      <h1>
         Hands-on Project 3-4
      </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="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">Submit</button>
          </fieldset>
      </form>
   </article>
    <script>
        var i = 1;
        var listItem = "";

        function processInput() {
            if (i <= 5) {             

               listIem = document.getElementById("item" + i).innerHTML = i;

            }

        }
        if (window.addEventListener) {
            window.addEventListener("click", processInput, false);
        } else if (window.attachEvent) {
            window.attachEvent("onclick", processInput);
        }
    </script>
</body>
</html>

And what is not working? Any specific error are you getting? — Tushar, Feb 01 '17 at 03:54
I keep getting undefined when I press the submit button or I get numbers 1 - 5. — DeterminedPupil, Feb 01 '17 at 03:55
btw, you spelled "listIem", when I think you meant to spell "listItem". — Lex, Feb 01 '17 at 03:58
Thanks, that worked. But I notice that it skips the first item in the list and began inserting it in the second item of the list. — DeterminedPupil, Feb 01 '17 at 04:05

score 0 · Answer 1 · edited May 23 '17 at 12:16

0

This:

function processInput() {
    if (i <= 5) {  
        listIem = document.getElementById("item" + i).innerHTML = i;
    }
}

Should be this:

function processInput() {
    if (i <= 5) {  
        document.getElementById("item" + i).textContent = document.getElementById("toolBox").value;
        i++; // increment i here
    }
}

Or this (if you want things to be separated):

function processInput() {
    if (i <= 5) {  
        var listItem = document.getElementById("item" + i);
        var input = document.getElementById("toolBox");
        listItem.textContent = input.value;
        i++; // increment i here
    }
}

Use .textContent instead of .innerHTML and get the #toolBox input value using .vlaue.

Note: it will be better if you could generate the list items dynamically (check how here).

edited May 23 '17 at 12:16

Community

1
1

answered Feb 01 '17 at 03:58

ibrahim mahrir

31,174
5
48
73

Is there a way I could use a switch statement instead? – DeterminedPupil Feb 01 '17 at 04:08
@RodO Why need a switch statement? – ibrahim mahrir Feb 01 '17 at 04:10
I want to know if I ever needed to use one in this type of case how to do so. – DeterminedPupil Feb 01 '17 at 04:24
@RodO I forget to mention that you need to increment `i` each time `processInput` get called. See the edit the new answer work. I posted the whole function so you can understand. – ibrahim mahrir Feb 01 '17 at 04:31
Thanks! I notice that it is ignoring the first value in the list. – DeterminedPupil Feb 01 '17 at 04:40
@RodO is this new answer still ignoring it? – ibrahim mahrir Feb 01 '17 at 04:44
My apologies, yes. I will try and see what I may have coded incorrectly to see if I can fix it. I will let you know when I do. – DeterminedPupil Feb 02 '17 at 01:56

Get Items from Textbox to Display after clicking submit

1 Answers1