CODEWITHSUNDEEP
javascripthtmlarraysadditionarithmetic-expressions
Acuff558
Acuff558

Reputation: 59

Adding together any number of items in an array with Javascript

I am learning Javascript and currently having an issue creating an application. I want to create a webpage that will take the values entered in a textbox, and place them inside an array. Then, I want to create a function that will add the values together. I am nearly complete, but I am having a tough time figuring out how to create a function that will add together the array items. My biggest issue is that any number of values can be entered into the page, and all the documentation I can find is based on having a pre-set array. Here is my code:

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 = "";
}

Upvotes: 1

Views: 1643

Answers (3)

pedro-hdt
pedro-hdt

Reputation: 11

Edit: To display the addition can just use something like:

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

let additionDisp = array1.join(" + ") + " = " + result;
console.log(additionDisp);

Upvotes: 1

R&#250;nar Berg
R&#250;nar Berg

Reputation: 4842

Use Array.prototype.reduce.

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

console.log(total);

Upvotes: 0

Sunil Lama
Sunil Lama

Reputation: 4539

You need to declare your add function first, parse your string input to integer value and perform a reduction to get the sum

//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>

Upvotes: 0

Related Questions