User input text box

Question

I'm having a bit of trouble of getting the JavaScript code right. I need some help on what goes where and how it's supposed to look.

This is what I have so far in my script.

<script>
  var i = "1";
   var listItem = "";
  function processInput() {
 if (i <= 5) //Comparison operator//
      document.getElementById("listItem").innerHTML = (i <= 5);
  </script>

Here is my question:

Create a function called processInput(). Within the function create an if statement that runs if the value of i is less than or equal to 5. The if statement should perform the following actions:

• Set the value of the listItem variable to the string "item" concatenated with the value of i.
• Set the content of the element with an id equal to listItem to the value of the element with the id or toolbox.
• Set the value of the element with the id of toolbox to an empty string.

---

I'm not sure if I'm setting this up right. I have tried w3Schools and the information on their site seemed to be unhelpful/unclear.

Answer 1

Going step by step:

• Set the value of the listItem variable to the string "item" concatenated with the value of i .

   var listItem = "item" + i; // + performs string concatenation 

• Set the content of the element with an id equal to listItem to the value of the element with the id of toolbox .

   document.getElementById(listItem.innerHTML = document.getElementById("toolbox").value; 

• Set the value of the element with the id of toolbox to an empty string.

   document.getElementById("toolbox").value = ""; 

So the whole function should look like:

function processInput() {
    if (i <= 5) {
        var listItem = "item" + i;
        document.getElementById(listItem.innerHTML = document.getElementById("toolbox").value;
        document.getElementById("toolbox").value = "";
    }
}

Answer 2

I don't know what's your goal behind this but that's how it's done. remember that "i" will stay the same because you're not incrementing it just study more javascript and i hope this helps you buddy

<script type="text/javascript">
var i = 1;
var listItem = "";
var listItemElement = document.getElementById("listItem");
var toolbox = document.getElementById("toolbox");
processInput();

function processInput() {
    if (i <= 5) {
        listItem = "item " + i;
        listItemElement.innerHTML = toolbox.innerHTML;
        toolbox.innerHTML = "";
    }
}