CODEWITHSUNDEEP
javascriptarraysloops
DjH
DjH

Reputation: 1498

Javascript function to add input value to an array then generate a list after 5th submission

I'm working on debugging a javascript function for school and have become stuck. I believe I have reconciled all syntax errors and most logic errors as well (at least to the point where there are no errors being displayed in console), but the code is still not working.

The function needs to take the input value from a form, store it to an array after each submission, and then after the fifth submission display a list of all five values that were entered.

I have a feeling that the final errors that are preventing execution are somewhere in the loops, which is my weakest game in programming so far. I know posting school-based assignments on here is a bit of a faux pas, but I have no where else to go right now. I'm not necessarily looking just for an answer either, just hoping someone can steer me in the right direction as I want to actually gain an understanding.

The html for the document which includes the function and my current changes is

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

<body>
   <header>
      <h1>
         Hands-on Project 4-3
      </h1>
   </header>

   <article>
      <div id="results">
          <p id="resultsExpl"></p>
          <ul>
             <li id="item1"></li>
             <li id="item2"></li>
             <li id="item3"></li>
             <li id="item4"></li>
             <li id="item5"></li>
          </ul>
      </div>
      <form onsubmit="processInput();">
          <fieldset>
            <label for="placeBox" id="placeLabel">
              Type the name of a place, then click Submit:
            </label>
            <input type="text" id="placeBox" />
          </fieldset>
          <fieldset>
            <button type="button" id="button" >Submit</button>
          </fieldset>
      </form>
   </article>
   <script>

        var places = []; // new array to store entered places
        var i = 0; // counter variable to track array indexes

      // function to add input to array and then generate list after 5th submission
      function processInput() {


         places[i] = document.getElementById("placeBox").value; // add entered value to array
//         document.getElementById("placeBox").value = ""; // clear text box
         if (i < 5) { // iterate counter variable
            i++;
         }
         else { // add entered value to array and write results to document
            document.getElementById("resultsExpl").innerHTML = "You entered the following places:";
            for (j = 0; j < 5; j++) { // write each array element to its corresponding list item
               var listItem = "item" + j;
               document.getElementById("resultsExpl").innerHTML = places[j];
            }
          }
      }

      // add backward compatible event listener to Submit button
      var submitButton = document.getElementById("button");
      if (submitButton.addEventListener) {
        submitButton.addEventListener("click", processInput, false);
      } else if (submitButton.attachEvent)  {
        submitButton.attachEvent("onclick", processInput);
      }


   </script>

</body>
</html>

Thank you!

Edited: Moved var places = []; & var i to outside of the function and set var i & var j to both equal "0". Commented out document.getElementById("placeBox").value = ""; and it appears that line isn't necessary. However, the function is still not working correctly or really doing anything it appears.

Upvotes: 0

Views: 1436

Answers (2)

iregaz
iregaz

Reputation: 11

One moment I noticed. You guys decided to eliminate this line, but without this line things weren't working well with submit button.

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

I tried to keep it and moved it under i++; *(don't know if this was the case of it working now)

Additionally I made i and j < 4 since we are starting from 0 now and need only 5 responses.

Upvotes: 0

Jamiec
Jamiec

Reputation: 136104

A few pointers

  1. Your places array is recreated every time the function is run that is every time you click the button. Move the declaration of the variable (var places = []) outside of the function.

  2. Your i variable is reset to 1 every time too, and arrays are zero based (start i at zero). Same as above - declare it outside the function.

  3. The variable listItem does not appear to have any use.

  4. (minor) Dont repeat yourself! Store the result of document.getElementById("placeBox") in a variable and reuse it.

Edit:

  1. Remove the <form> from around your elements, it will have the effect of submitting your page, which you dont want.

  2. You're only appending the last item to the output, as you're overwriting it each time - change to document.getElementById("resultsExpl").innerHTML += places[j]; (Note the change from = to +=). Or, use your variable listItem to target the correct <li> (remember to start the li elements from item0).

Working example below.

var places = []; // new array to store entered places
var i = 0; // counter variable to track array indexes

// function to add input to array and then generate list after 5th submission
function processInput() {


  places[i] = document.getElementById("placeBox").value; // add entered value to array
  if (i < 4) { // iterate counter variable
    i++;
  }
  else { // add entered value to array and write results to document
    document.getElementById("resultsExpl").innerHTML = "You entered the following places:";
    for (j = 0; j < 5; j++) { // write each array element to its corresponding list item
      var listItem = "item" + j;
      document.getElementById(listItem).innerHTML = places[j];
    }
  }
}

// add backward compatible event listener to Submit button
var submitButton = document.getElementById("button");
if (submitButton.addEventListener) {
  submitButton.addEventListener("click", processInput, false);
} else if (submitButton.attachEvent)  {
  submitButton.attachEvent("onclick", processInput);
}
<header>
      <h1>
         Hands-on Project 4-3
      </h1>
   </header>

   <article>
      <div id="results">
          <p id="resultsExpl"></p>
          <ul>
             <li id="item0"></li>
             <li id="item1"></li>
             <li id="item2"></li>
             <li id="item3"></li>
             <li id="item4"></li>
          </ul>
      </div>
      <form>
          <fieldset>
            <label for="placeBox" id="placeLabel">
              Type the name of a place, then click Submit:
            </label>
            <input type="text" id="placeBox" />
          </fieldset>
          <fieldset>
            <button type="button" id="button" >Submit</button>
          </fieldset>
      </form>
   </article>

Upvotes: 1

Related Questions