Question

我试图通过使用getElementsByClassName将用户输入从html表单输入到数组中。

它可以使用getElementsById（“ ...”）。value并将其推入空数组中。但是，当我尝试使用getElementsByClassName进行操作时，我得到了一个htmlcollection，似乎出了点问题。它不注册用户输入。非常感谢您的帮助，我整天都在努力寻找解决方案...

<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>

我希望单词被压入一个数组，但是我返回一个空的单词。

Answer 1

一些问题：

您的缩进不可用，并且正确地显示console.log发生在具有局部变量vocabEnglish的函数之外。因此很明显，它在函数外部是未定义的。
input元素的值不是通过innerText属性来检索的，而是通过value来获取的。
单击按钮后，将提交表单，并重新加载页面，从而丢失输出。使用e.preventDefault

更正的代码：

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()
}

Answer 2

使用value代替innerText

我在这里举了一个例子，它仍然打印到控制台供您查看。

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>

Answer 3

    <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>

从html形式推送数组中的元素

3 个答案: