Объединение любого количества элементов в массиве с Javascript - PullRequest
Новая
       45

Объединение любого количества элементов в массиве с Javascript

1 голос
/ 07 марта 2020

Я изучаю 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 = "";
}

Ответы [ 3 ]

1 голос
/ 07 марта 2020

Редактировать: для отображения дополнения можно просто использовать что-то вроде: 

const array1 = [1, 2, 3, 4];
const result = array1.reduce((acc, curr) => parseInt(curr) + parseInt(acc));

let additionDisp = array1.join(" + ") + " = " + result;
console.log(additionDisp);
0 голосов
/ 07 марта 2020

Использование Array.prototype.reduce. 

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

console.log(total);
0 голосов
/ 07 марта 2020

Сначала необходимо объявить вашу 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>
...