Adding and summing N elements (with N unspecified) in a box in Javascript-CodePudding

Good evening everyone, I am trying to complete this code so that a user enters numbers as many times as he wants inside a box and to add up all these numbers by displaying the result in a second box.

What I have managed to do I show you below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
</head>
<body>
    <div >
        <h1 >Shopping</h1>
        <h3>Price: </h3>
        <input type="number" id="n1" value="">
        <h3>Total Price: </h3>
        <input type="number" id="n2" value="" disabled>
        <input type="button" value="Add price" onclick="add()" >
    </div>
    <script src="script.js"></script>
</body>
</html>

body{
    background: linear-gradient(45deg, violet, cyan);
    background-attachment: fixed;
    background-repeat: no-repeat;
}
.frame{
    background-color: rgba(255, 255, 255, 75);
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    column-gap: 5px;
    row-gap: 5px;
    border: white solid 5px;
    border-radius: 20px;
    padding: 10px;
    width: 30%;
}
.grid2{
    grid-column: 2 span;
}
.but{
    grid-column: 2 span;
    border: 2px solid black;
    border-radius: 20px;
}
.but:hover{
    background: linear-gradient(45deg, violet, cyan);
}

Then the user enters a number in the 'Price' box and clicks on 'Add Price' and the result should appear in the box on the left.

Each time the user adds a new price, the left-hand box is updated with the sum of the prices,

so I will definitely need a variable

"sum" =0

What I can't figure out is how to do this and wonder if there is an alternative method to arrays.

Thank you and have a good evening.

I tried using a sum variable initialised to 0 by summing the price ids but this did not work.

What is expected is the continuous updating of the sum of the prices.

CodePudding user response：

In the add function you can control the sum by the value of the input, something like this function can help you:

const add = () => {
    var total = document.getElementById("n2").value
  if (total == ""){
    document.getElementById("n2").value = parseInt(document.getElementById("n1").value)
    return
  }
  document.getElementById("n2").value = parseInt(document.getElementById("n2").value)   parseInt(document.getElementById("n1").value)
}

You can find all working by this link

CodePudding user response：

You can approach this in two ways:

Event based
Using setInterval

In event based you can just update the total price for every button click in add function or you can get every price inputs' values with selectors and add them up in every lets say 2 seconds.

I think you should do the first one

CodePudding user response：

There is no reason to hide code away in an external place like jsfiddle.net (that page is difficult to operate on mobile devices like smartphones). You can do everything right here:

const [n1,n2,btn]=document.querySelectorAll(".frame input")
btn.onclick=()=>n2.value= n1.value ( n2.value??0)

body{
background: linear-gradient(45deg, violet, cyan);
background-attachment: fixed;
background-repeat: no-repeat;
}
.frame{
background-color: rgba(255, 255, 255, 75);
margin: auto;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
column-gap: 5px;
row-gap: 5px;
border: white solid 5px;
border-radius: 20px;
padding: 10px;
width: 30%;
}
.grid2{
grid-column: 2 span;
}
.but{
grid-column: 2 span;
border: 2px solid black;
border-radius: 20px;
}
.but:hover{
background: linear-gradient(45deg, violet, cyan);
}

<div >
    <h1 >Shopping</h1>
    <h3>Price: </h3>
    <input type="number" id="n1" value="">
    <h3>Total Price: </h3>
    <input type="number" id="n2" value="" disabled>
    <input type="button" value="Add price" >
</div>