<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS intro variable opertaor og parametre</title>
</head>
<style>
#app {
background-color: aqua;
display: grid;
}
</style>
<body>
Per har betalt:<input type="number" id="per"><br />
Paal har betalt:<input type="number" id="paal"><br/>
Espen har betalt:<input type="number" id="espen"><br/>
<button onclick="calculate()">Beregne</button>
<div id="app"></div>
<script>
function calculate() {
let amountPayedPer = document.getElementById("per").valueAsNumber;
let amountPayedPaal = document.getElementById("paal").valueAsNumber;
let amountPayedEspen = document.getElementById("espen").valueAsNumber;
let totalAmountPayed = amountPayedPer + amountPayedPaal + amountPayedEspen;
let costPerPerson = totalAmountPayed / 3;
let owesPer = costPerPerson - amountPayedPer;
let owesPaal = costPerPerson - amountPayedPaal;
let owesEspen = costPerPerson - amountPayedEspen;
document.getElementById("app").innerHTML = /*HTML*/ `
Per har betalt: ${amountPayedPer}<br/>
Paal har betalt: ${amountPayedPaal}<br/>
Espen har betalt: ${amountPayedEspen}<br/>
Sum betalt: ${totalAmountPayed}<br/>
Kostnad per person: ${costPerPerson}<br/>
Per skylder: ${owesPer}<br/>
Paal skylder: ${owesPaal}<br/>
Espen skylder: ${owesEspen}<br/>
`;
}
</script>
</body>
</html>