使用Javascript將數組中的任意數量的項目加在一起

Question

我正在學習 Javascript，目前在創建應用程序時遇到問題。 我想創建一個網頁，它將獲取在文本框中輸入的值，並將它們放在一個數組中。 然后，我想創建一個將這些值相加的函數。 我幾乎完成了，但是我很難弄清楚如何創建一個將數組項加在一起的函數。 我最大的問題是可以在頁面中輸入任意數量的值，我能找到的所有文檔都基於預設數組。 這是我的代碼：

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Numbers</title>
</head>
<body>
    <section>
        <header class="header m-2" id="myForm">Numbers App</header>
        <section class="row m-2">
            <label class="inputLabel">Number: <input type="number" id="numInput"></label>
        </section>
        <button class="button m-1" onclick="displayText(); addNum(); testCount();" id="addButton">Add Number</button>
        <button class="button m-1" disabled>Calculate</button>
        <button class="button m-1" onclick="resetPage();">Reset</button>
    </section>

    <section id="numForm">
        <div class="numLabel m-2" id="numLabel">Numbers Added: </div>
        <p class="m-2 mt-3" id="numValue"></p>
    </section>

<script src="script.js"></script>
</body>
</html>

JS:
//Display "Numbers Added: " 
function displayText() {
    document.getElementById("numLabel").style.display = "block";
}

//Add the entered values into the array
let numArray = [];
function addNum() {
    let num = document.getElementById("numInput").value;

    numArray.push(num);
    document.getElementById("numValue").innerHTML = numArray.join(" ");
}

//Testing count function
function testCount() {
    for(count = 0; count > 2; count++) {
        console.log("this works");
    }
}

//Reset the page
function resetPage() {
    //Clear input field
    document.getElementById("numInput").value = "";
    //Hide "Numbers Added: "
    document.getElementById("numLabel").style.display = "none";
    //Clear array items
    numArray = [];
    document.getElementById("numValue").innerHTML = "";
}

Answer 1

編輯：要顯示添加可以使用類似的東西：

 const array1 = [1, 2, 3, 4]; const result = array1.reduce((acc, curr) => parseInt(curr) + parseInt(acc)); let additionDisp = array1.join(" + ") + " = " + result; console.log(additionDisp);

Answer 2

您需要先聲明您的add函數，將您的字符串輸入parse為整數值並執行歸約以獲得總和

 //Add the entered values into the array let numArray = []; //Display "Numbers Added: " function displayText() { var result = numArray.reduce((acc, curr) => parseInt(curr) + parseInt(acc), 0); var numSumString = ""; for (data of numArray) { numSumString = data + " + " + numSumString; } document.getElementById("numLabel").innerHTML = "Numbers Added:" + numSumString.substring(0, numSumString.length - 2) + "=" + result; } function addNum() { let num = document.getElementById("numInput").value; numArray.push(num); document.getElementById("numValue").innerHTML = numArray.join(" "); } //Reset the page function resetPage() { //Clear input field document.getElementById("numInput").value = ""; //Hide "Numbers Added: " document.getElementById("numLabel").style.display = "none"; //Clear array items numArray = []; document.getElementById("numValue").innerHTML = ""; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Numbers</title> </head> <body> <section> <header class="header m-2" id="myForm">Numbers App</header> <section class="row m-2"> <label class="inputLabel">Number: <input type="number" id="numInput"></label> </section> <button class="button m-1" onclick="addNum();" id="addButton">Add Number</button> <button class="button m-1" onclick="displayText();">Calculate</button> <button class="button m-1" onclick="resetPage();">Reset</button> </section> <section id="numForm"> <div class="numLabel m-2" id="numLabel">Numbers Added: </div> <p class="m-2 mt-3" id="numValue"></p> </section> <script src="script.js"></script> </body> </html>

Answer 3

使用Array.prototype.reduce 。

 const array = [0, 42, 101, 5, 2]; const total = array.reduce((sum, x) => sum + x); console.log(total);

使用Javascript將數組中的任意數量的項目加在一起

問題描述

3 個解決方案

解決方案1
1 2020-03-07 02:23:22

解決方案2
0 已采納 2020-03-07 02:26:04

解決方案3
0 2020-03-07 03:05:13

使用Javascript將數組中的任意數量的項目加在一起

問題描述

3 個解決方案

解決方案1 1 2020-03-07 02:23:22

解決方案2 0 已采納 2020-03-07 02:26:04

解決方案3 0 2020-03-07 03:05:13

解決方案1
1 2020-03-07 02:23:22

解決方案2
0 已采納 2020-03-07 02:26:04

解決方案3
0 2020-03-07 03:05:13