I have a button that creates new input fields which uses the variable "idNumber" to create new id's for the newly created field. For example, the hours field has id="hours_1". Upon creating a new field, the function should assign the new hours field id="hours_2". This should enable the calculate() function to perform the calculations on the total field. My debugging has lead me to believe that the global variable idNumber is not being updated. This is my first time using JavaScript so I don't know what's wrong.
var idNumber= 1;
var deviceID = "device_"+idNumber;
var kWattID = "kW_"+idNumber;
var hoursID = "hours_"+idNumber;
var totalID = "total_"+idNumber;
function createNewInputFields(idNumber) {
// console.log("In createNewInputFields - Given number:"+idNumber);
deviceID = "device_"+idNumber;
kWattID = "kW_"+idNumber;
hoursID = "hours_"+idNumber;
totalID = "total_"+idNumber;
idNumber = idNumber+1;
// console.log("In createNewInputFields() - "+deviceID);
// console.log("In createNewInputFields() - "+kWattID);
// console.log("In createNewInputFields() - "+hoursID);
// console.log("In createNewInputFields() - "+totalID);
// console.log("In createNewInputFields() ID after increase- "+idNumber);
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 = "<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>";
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(idNumber){
// 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; /* Make it white if you need */
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" 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(idNumber)" id="kW_1" required>
</div>
<div class="hoursCol" id="hoursCol">
<p><b>Hours used</b></p>
<input type="text" oninput="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>