Push elements in array from html form

Question

I'm trying to get user input from an html form into an array, by using getElementsByClassName.

It works using getElementsById("...").value and then push it into the empty array. But when I try to do it with getElementsByClassName, I get a htmlcollection returned and something seems to go wrong. It doesn't register the user input. Any help is strongly appreciated, I've been trying to find a solution all day...

<title>Word Input</title>

<form> 

    <input type="text" class="englishWord"> <input type="text" class="spanishWord"> <br> <br> 
    <input type="text" class="englishWord"> <input type="text" class="spanishWord"> <br> <br> 
    <input type="text" class="englishWord"> <input type="text" class="spanishWord"> <br> <br> 
    <input type="text" class="englishWord"> <input type="text" class="spanishWord"> <br> <br> 
    <input type="text" class="englishWord"> <input type="text" class="spanishWord"> <br> <br> 


    <button id="submit"> Submit </button>
</form>

<script> 

    document.getElementById("submit").addEventListener("click", handler9); 

    function handler9() {

    let vocabEnglish = [];
    let englishWords = document.getElementsByClassName("englishWord");


    for (let i = 0; i < englishWords.length; i++) {
            let englishWord = englishWords[i].innerText;
            vocabEnglish.push(englishWord); 
        }
    }

    console.log(vocabEnglish); 

</script>

I expect the words to be pushed into an array, but I get returned an empty one.

trincot · Accepted Answer · 2019-01-05 21:09:08Z

2

A few issues:

Your indentation is off, and putting it right reveals that the console.log happens outside of the function that has the local variable vocabEnglish. So obviously it is undefined outside the function.
The value of an input element is not retrieved via the innerText property, but value.
When you click the button the form is submitted, and a reload of the page happens, whereby you lose the output. Cancel the submission with e.preventDefault

Corrected code:

document.getElementById("submit").addEventListener("click", handler9);

function handler9(e) {
    let vocabEnglish = [];
    let englishWords = document.getElementsByClassName("englishWord");

    for (let i = 0; i < englishWords.length; i++) {
        let englishWord = englishWords[i].value;
        vocabEnglish.push(englishWord); 
    }
    console.log(vocabEnglish);
    e.preventDefault()
}

answered Jan 5, 2019 at 21:09

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vince Over a year ago

I can't thank you enough! I didn't know about the reloading of the page after submitting a form. It would have taken me a long time to figure that one out..

Sølve · Accepted Answer · 2019-01-06 01:03:58Z

use value instead of innerText

I've made an example here, it still prints to the console for you to view.

document.getElementById("submit").addEventListener("click", handler9);

function handler9() {
  let vocabEnglish = [];
  let englishWords = document.getElementsByClassName("englishWord");

  for (let i = 0; i < englishWords.length; i++) {
    let englishWord = englishWords[i].value;
    vocabEnglish.push(englishWord);
  }
  console.log(vocabEnglish);
}

<form>

  <input type="text" class="englishWord"> <input type="text" class="spanishWord"> <br> <br>
  <input type="text" class="englishWord"> <input type="text" class="spanishWord"> <br> <br>
  <input type="text" class="englishWord"> <input type="text" class="spanishWord"> <br> <br>
  <input type="text" class="englishWord"> <input type="text" class="spanishWord"> <br> <br>
  <input type="text" class="englishWord"> <input type="text" class="spanishWord"> <br> <br>


  <button id="submit"> Submit </button>
</form>

Yasin Tazeoglu · Accepted Answer · 2019-01-05 21:08:51Z

0

    <form> 

    <input type="text" class="englishWord"> <input type="text" class="spanishWord"> 
    <br> <br> 
   <input type="text" class="englishWord"> <input type="text" class="spanishWord"> 
   <br> <br> 
   <input type="text" class="englishWord"> <input type="text" class="spanishWord"> 
     <br> <br> 
    <input type="text" class="englishWord"> <input type="text" class="spanishWord"> 
    <br> <br> 
<input type="text" class="englishWord"> <input type="text" class="spanishWord"> <br> <br> 


<button id="submit"> Submit </button>
</form>

<script> 

document.getElementById("submit").addEventListener("click", handler9); 

function handler9() {

let vocabEnglish = [];
let englishWords = document.getElementsByClassName("englishWord");


for (let i = 0; i < englishWords.length; i++) {
        let englishWord = englishWords[i].value;
        vocabEnglish.push(englishWord); 
    }
}

console.log(vocabEnglish); 

</script>

answered Jan 5, 2019 at 21:08

Yasin Tazeoglu

1,0249 silver badges18 bronze badges

1 Comment

Sølve Over a year ago

Good answer! The only thing missing is some explanation so that he can understand why it works.

Collectives™ on Stack Overflow

Push elements in array from html form

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related