Javascript 如何遍历文本字段并将值推送到数组_Javascript

Javascript 如何遍历文本字段并将值推送到数组

javascript

Javascript 如何遍历文本字段并将值推送到数组,javascript,Javascript,我试图创建一个脚本，该脚本遍历表单并将值存储到keypress上的数组中。然后，数组以另一种称为“resultBox”的形式显示为串联文本。当我尝试使用document.GetElementById方法访问时，它给出了未捕获的TypeError:无法读取null的属性“value” var values = []; function getKeys(){ for(var i = 0; i<myForm.length; i++){ console.log(myFor

我试图创建一个脚本，该脚本遍历表单并将值存储到keypress上的数组中。然后，数组以另一种称为“resultBox”的形式显示为串联文本。当我尝试使用document.GetElementById方法访问时，它给出了未捕获的TypeError:无法读取null的属性“value”

var values = [];

function getKeys(){
    for(var i = 0; i<myForm.length; i++){
        console.log(myForm[i].value);
        var txtValue = document.getElementById(myForm).value;
        values.push(txtValue);
        console.log(values);
    }
}

var值=[]；
函数getKeys（）{
对于（var i=0；i您可以尝试使用一些内置方法，如querySelectorAll（）
，map（）
，filter（）
和join（）
，如下所示：

var-inputList=document.queryselectoral（'myForm[type=text]：not（#txt6'）；
forEach（函数（输入）{
addEventListener（'input'，function（）{
var values=Array.from（inputList）.map（el=>el.value.trim（））.filter（v=>v）.join（'，'）；
document.getElementById（'txtResult'）。value=value；
});
})；
输入[类型=文本]{
宽度：50%；
填充：12px 20px；
利润率：8px0；
框大小：边框框；
}

文本框1



文本框2



文本框3



文本框4



文本框5



文本框6



结果框



您可以尝试使用一些内置方法，如queryselectoral（）
、map（）
、filter（）
和join（）
，如下所示：

var-inputList=document.queryselectoral（'myForm[type=text]：not（#txt6'）；
forEach（函数（输入）{
addEventListener（'input'，function（）{
var values=Array.from（inputList）.map（el=>el.value.trim（））.filter（v=>v）.join（'，'）；
document.getElementById（'txtResult'）。value=value；
});
})；
输入[类型=文本]{
宽度：50%；
填充：12px 20px；
利润率：8px0；
框大小：边框框；
}

文本框1



文本框2



文本框3



文本框4



文本框5



文本框6



结果框



感谢您的回复，我应该注意到，我必须添加一个按钮来添加另一个文本字段，并且不会破坏代码。有没有方法可以使用for循环和.length属性来实现这一点。以及querySelectorAll（）方法或getElementByID方法。@BenMarr，无论from中有多少文本输入，只要这些文本输入元素在表单中，代码就可以用于所有文本输入元素：）我曾尝试使用您提供的代码，但在文本字段中键入内容后，结果框仍为空。感谢您的回复，我应该注意到我必须添加一个按钮，以添加另一个文本字段，并且不会破坏代码。是否有一种方法可以使用for循环和.length属性来实现此目的。以及querySelectorAll（）方法或getElementByID方法。@BenMarr，无论from中有多少文本输入，只要它们在表单中，代码将适用于所有文本输入元素：）我已尝试使用您提供的代码，但在文本字段中键入内容后，结果框保持为空。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Excercise 2</title>
    <script src ="script.js"></script>
    <style>
        input[type=text] {
                width: 50%;
                padding: 12px 20px;
                margin: 8px 0;
                box-sizing: border-box;
                }
    </style>
</head>
<body>
    <form id="myForm">
        <label for="txt1">Text Box 1</label>
        <input type = "text" onkeyup = 'getKeys()'id='txt1' name="txt1"> <br><br>
        <label for="txt2">Text Box 2</label>
        <input type = "text" id='txt2' name="txt2"><br><br>
        <label for="txt3">Text Box 3</label>
        <input type = "text" id='txt3' name="txt3"><br><br>
        <label for="txt4">Text Box 4</label>
        <input type = "text" id='txt4' name="txt4"><br><br>
        <label for="txt5">Text Box 5</label>
        <input type = "text" id='txt5' name="txt5"><br><br>
        <label for="txt6">Text Box 6</label>
        <input type = "text" id='txt6' name="txt6"><br><br>
    </form>
    <form id ="resultBox">
        <label for="txtResult">Result Box</label>
        <input type = "text" id ="txtResult" name="txtResult" readonly><br><br>
    </form>
</body>

</html>