javascript - 我的问题是关于在 Javascript 中将文本框值存储在数组中并将它们求和

Question

我的问题是创建一个网页，允许用户一次提供一个数字或以逗号分隔列表的形式向您的程序提供数字。用户将通过按下按钮提交每个或一组数字。用户可以根据需要多次按下该按钮。

我在 html 和 javscript 中做过，但 Dnt 知道如何从用逗号分隔的文本框中接受多个值到 javascript 中。

标签： javascript

Answer 1

从一个空数组开始存储所有数字，然后使用 javascript 字符串函数 split 添加它们。

var numbers = [];
var btn = document.querySelector("button");  //or any other way to select your button
var txt = document.querySelector("input");  //or any other way to select your text input

btn.addEventListener('click', addNumbersToArray, {passive: true});

function addNumbersToArray() {
    let values = txt.value;
    if (values.length == 0) return; //no data to process
    if (values.indexOf(',') == -1) { //only one value
        let num = Number(values);
        if (!isNaN(num)) { //check to make sure it's a number
            numbers.push(num); //add it to the numbers list
        }
    } else { //more than one value
        let nums = values.split(','); //this splits your string into an array
        let numsArr = nums.map((n)=>{ return Number(n) }); //turn them into a number
        let numsArr2 = nums.filter((n)=>{ return !isNaN(n) }); //filter out non-numbers
        numbers.concat(nums2Arr); //concatenate the new array to the previous numbers array

        /* COULD JUST BE ONE CALL
        let nums = values.split(",")
                         .map((n)=>{ return Number(n) })
                         .filter((n)=>{ return !isNaN(n) });
        numbers.concat(nums);
        */
    }
    processNumbers();
}

function processNumbers() {
   //DO SOMETHING WITH YOUR NUMBERS ARRAY
}

绝对有改进的余地，但我试图尽可能详细，这样你就有了拼图的部分来配置你想要的方式，你可以跳过 indexOf 运算符，只使用 values.split(",") 它将返回无论如何只有一个数字的数组。由于您要求 1 或数字列表，因此我试图将其包含在它们中只是为了完整性和清晰性。