CODEWITHSUNDEEP
javascripthtml
Zoe11
Zoe11

Reputation: 11

How to apply user input into an array up to five times and then executing the results

I want to have a user input a string of names of their favorite music artists, but they can only enter up to five of them, and then use this string in the array to display the user's choices. Here is my code:

<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>
  <fieldset>
    <label for="plBox" id="placeLabel">
      Please tell us!
    </label>
    <input type="text" id="placeBox" />
  </fieldset>
  <fieldset>
    <button type="submit" id="artist">Submit</button>
  </fieldset>

</form>
</article>
<script>
  // new array to store entered music artists
  var music = [];
  // counter variable to track array indexes
  var i = 0;

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

    document.getElementById("placeBox").value = ""
      // add entered value to array
    places[i] = document.getElementById("placeBox").value;

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

    } else {
      listItem = "";
      document.getElementById("resultsExpl");
      document.write.innerHTML = "These are your favorite artists:" + listItem;

    }

    var submitButton = document.getElementById("artist");
    document.addEventListener("click", processInput, false);

    if (submitButton.addEventListener) {
      submitButton.addEventListener("click", processInput, false);

    } else if (submitButton.attachEvent) {
      submitButton.attachEvent("onclick", processInput);
    }
  }
</script>

Upvotes: 0

Views: 189

Answers (1)

AbdealiLoKo
AbdealiLoKo

Reputation: 3327

In the beginning of the function, you are clearing the value before saving it in the places variable

document.getElementById("placeBox").value = ""
  // add entered value to array
places[i] = document.getElementById("placeBox").value; // places[i] is just set to ""

Hence it keeps storing blank strings ("")

You are also using the same variable "i" to iterate over for loop and use as a reference to how much of places filled upto now.

EDIT 1 : Some more issues ...

The event is not being attached to the button. This is because the code to attachEvent is inside the function "processInput", but processInput is not being called. The lines

var submitButton = document.getElementById("artist");
document.addEventListener("click", processInput, false);

if (submitButton.addEventListener) {
  submitButton.addEventListener("click", processInput, false);

} else if (submitButton.attachEvent) {
  submitButton.attachEvent("onclick", processInput);
}

need to be outside the function.

Another problem is places is not defined in the global scope. You need to add

var places = [];

in the top - near 

var music = [];
var i = 0;

EDIT 2 -- Some more errors (part 2)

The for loop over the list items goes from 0 to 4, but the ids in the html code are 1 to 5

I think there are many bugs in your code. You need to write it bit by bit and keep testing your code so that you dont ever get so many accumulated bugs. Accumulated bugs makes it very difficult to debug.

Upvotes: 1

Related Questions