I have a field "total" which calculates the product of 'price per kWH, 'KwH', and 'Hours used'. I would like to dynamically change the output of all 'total' fields if the user retrospectively changes the value of 'price per KwH'. Currently, only the latest added total field recalculates the product when changing the price value.
var idNumber= 1;
var deviceID = "device_"+idNumber;
var kWattID = "kW_"+idNumber;
var hoursID = "hours_"+idNumber;
var totalID = "total_"+idNumber;
function createNewInputFields() {
// console.log("In createNewInputFields - Given number:"+idNumber);
idNumber = idNumber+1;
// console.log("In createNewInputFields - after increase:"+idNumber);
deviceID = "device_"+idNumber;
kWattID = "kW_"+idNumber;
hoursID = "hours_"+idNumber;
totalID = "total_"+idNumber;
// console.log("In createNewInputFields() - "+deviceID);
// console.log("In createNewInputFields() - "+kWattID);
// console.log("In createNewInputFields() - "+hoursID);
// console.log("In createNewInputFields() - "+totalID);
const containerDevice = document.getElementById('deviceCol');
const containerkWatt = document.getElementById('kWattsCol');
const containerHours = document.getElementById('hoursCol');
const containerTotal = document.getElementById('totalCol');
const inputHtmlDevice = "<input type='text' id="+deviceID+" required>";
const inputHtmlkWatt = "<br> <input type='text' oninput='calculate()' id="+kWattID+" required>";
const inputHtmlHours = "<input type='text' oninput='calculate()' id="+hoursID+" required>";
const inputHtmlTotal = "<input type='text' id="+totalID+" required readonly>";
containerDevice.insertAdjacentHTML('beforeend', inputHtmlDevice);
containerkWatt.insertAdjacentHTML('beforeend', inputHtmlkWatt);
containerHours.insertAdjacentHTML('beforeend', inputHtmlHours);
containerTotal.insertAdjacentHTML('beforeend', inputHtmlTotal);
return idNumber;
}
// function to correctly round up to the third decimal
function precisionRound(number) {
var factor = Math.pow(10, 4);
return Math.round(number * factor) / factor;
}
function calculate(){
// console.log("In calculate() - idNumber: "+idNumber);
deviceID = "device_"+idNumber;
kWattID = "kW_"+idNumber;
hoursID = "hours_"+idNumber;
totalID = "total_"+idNumber;
// console.log("In calculate() - : "+deviceID);
// console.log("In calculate() - : "+kWattID);
// console.log("In calculate() - : "+hoursID);
// console.log("In calculate() - : "+totalID);
var kW = document.getElementById(kWattID).value;
var kW = parseFloat(kW).toFixed(3);
var hours = document.getElementById(hoursID).value;
var hours = parseFloat(hours).toFixed(3);
var kwH_rate = document.getElementById("energyrate").value
var total = kwH_rate * (kW * hours);
var total = precisionRound(total)
document.getElementById(totalID).value = total;
}body {
background: transparent;
color: #fcbe24;
padding: 0 24px;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<div class="intro">
<p> Enter your energy company's electricity rate per kWh: <input type="text" class="energyrate" oninput="calculate()" id="energyrate" required></p>
</div>
<div class="row">
<div class="deviceCol" id="deviceCol">
<p><b>Device</b></p>
<input type="text" id="device_1" required>
<!-- device name watts hours in use total -->
</div>
<div class="kWattsCol" id="kWattsCol">
<p><b>kWh</b></p>
<input type="text" oninput="calculate()" id="kW_1" required>
<!-- <input type="text" id="kW_1" required> -->
</div>
<div class="hoursCol" id="hoursCol">
<p><b>Hours used</b></p>
<input type="text" oninput="calculate()" id="hours_1" required>
<!-- <input type="text" onkeypress="calculate(idNumber)" id="hours_1"required> -->
</div>
<div class="totalCol" id="totalCol">
<p><b>Total</b></p>
<input type="text" id="total_1" readonly>
</div>
<button class="btn" onclick="createNewInputFields(idNumber)">Add another item</button>
</div>
<h1 id="header"></h1>
<script src="src/script.js"></script>
</body>
</html>