JavaScript网页数字分组求和取末位拼接功能开发求助

Got it, let's tweak your code to meet the exact requirements: splitting 20 numbers into 5 groups of 4, calculating each group's sum, extracting the last digit of each sum, and concatenating those digits for Comp1 (original order) and Comp2 (sorted order). Here's the updated working code:

<html>
<title> Test </title>
<body>
    <b>Paste Here (ctrl+v)</b>
    <br>
    <input id="boxx1" type="text" style="width:210px;" onKeyPress="boxx1KeyPress()" onKeyUp="boxx1KeyPress()">
    <br>
    <input type="button" Value="Clear Field" onClick="ClearField()">
    <br>
    <br>
    <b>Output 1</b>
    <input id="boxx2" type="text" style="width:370px;" readonly>
    <b>Comp 1</b><input id="comp1" type="text" style="width:180px;" readonly>
    <br>
    <br>
    <b>Output 2</b>
    <input id="boxx3" type="text" style="width:370px;" readonly>
    <b>Comp 2</b><input id="comp2" type="text" style="width:180px;" readonly>
</body>
<script>
function boxx1KeyPress() {
    const boxx1 = document.getElementById("boxx1");
    // Clean input: replace spaces/commas with commas, split into array, filter out empty strings
    const rawNumbers = boxx1.value.replace(/[ ,]+/g, ",").split(",").filter(num => num.trim() !== "");
    
    // Handle case where input isn't 20 numbers (optional but helpful)
    if (rawNumbers.length !== 20) {
        alert("Please paste exactly 20 space-separated numbers!");
        return;
    }

    // Output 1: original order, comma-separated
    const output1 = rawNumbers.join(",");
    document.getElementById("boxx2").value = output1;

    // Output 2: sorted numerically (fixed from original string sort)
    const sortedNumbers = [...rawNumbers].sort((a, b) => Number(a) - Number(b));
    const output2 = sortedNumbers.join(",");
    document.getElementById("boxx3").value = output2;

    // Helper function to process numbers into concatenated last digits of group sums
    function processNumbers(numArray) {
        let result = "";
        // Split into 5 groups of 4
        for (let i = 0; i < numArray.length; i += 4) {
            const group = numArray.slice(i, i + 4);
            // Calculate sum of the group
            const sum = group.reduce((total, num) => total + Number(num), 0);
            // Get last digit of sum and append to result
            result += sum % 10;
        }
        return result;
    }

    // Set Comp1 and Comp2 values
    document.getElementById("comp1").value = processNumbers(rawNumbers);
    document.getElementById("comp2").value = processNumbers(sortedNumbers);
}

function ClearField() {
    document.getElementById("boxx1").value = "";
    document.getElementById("boxx2").value = "";
    document.getElementById("boxx3").value = "";
    document.getElementById("comp1").value = "";
    document.getElementById("comp2").value = "";
}
</script>
</html>

Key Changes Explained: #

• Input Cleaning: We filter out empty strings to avoid issues with extra spaces or commas in the input.
• Numeric Sort Fix: The original sort() method was sorting strings (so "10" would come before "2"), we replaced it with a numeric sort using (a, b) => Number(a) - Number(b) to get proper ascending order.
• Reusable Helper Function: The processNumbers function handles grouping, sum calculation, and last digit concatenation for both outputs—no redundant code!
• Input Validation: Added a quick check to ensure exactly 20 numbers are pasted, which prevents unexpected behavior if the input is incomplete.
• Grouping Logic: Using a loop with slice(i, i+4) splits the array into 5 groups of 4 perfectly. The reduce method calculates the sum of each group, and sum % 10 grabs the last digit of that sum efficiently.

内容的提问来源于stack exchange，提问作者usernameon