I am completing the 57 programming exercises book by Brian P. Hogan.

With most of these exercises, I've tried to develop a GUI.

In the following exercise, I want to calculate the Simple Interest of a Principal value over a period of years. Simply put:

```
var yearlyInterest = Principal * (Percentage(whole number) /= 100)

(yearlyInterest * numberOfYears) + Principal

// outputs total amount at the end of investment over a period of however many years

```

As you can see in the example above, there are three core inputs - Principal, Percentage and Time.

When creating the graphical user interface, I am struggling to get all of these core inputs to calculate the result simultaneously.

The following code only manages to calculate the result once I enter the number for the Time input. (excuse my poor coding skills i.e. global variables, I'm only up to exercise 12!)

**HTML**

```
<!DOCTYPE html>
<html lang="en">
<body>
    <label for="principal">Principal</label>
    <input type="number" class="principal" style="border-color: black;">

    <label for="percentage">Percentage</label>
    <input type="number" class="percentage" style="border-color: black;">

    <label for="time">Time</label>
    <input type="number" class="time" style="border-color: black;">

    <div id="result"></div>
</body>
<script src="simpleInterest.js"></script>
</html>

```

**JS**

```
var principal = document.getElementsByClassName("principal");
var percentage = document.getElementsByClassName("percentage");
var time = document.getElementsByClassName("time");
var output = document.querySelector("#result");
var result;
var newResult;
var finalOutput;

document.addEventListener('input', function (event) {

    if ( event.target.classList.contains( 'principal' ) ) {
        var newPrincipal = principal[0].value;
        result = newPrincipal;
    }

    if ( event.target.classList.contains( 'percentage' ) ) {
        var newPercentage = percentage[0].value;
        newResult = result * (newPercentage / 100);
    }

    if ( event.target.classList.contains( 'time' ) ) {
        var newTime = time[0].value;
        finalOutput = (newResult * newTime) + Number(result);
    }

    output.innerHTML = `${finalOutput ? finalOutput : ""}`
}, false);

```

Could somebody please show me an effective way to simultaneously calculate something based on each input event and output it using the .innerHTML method?

Thanks!
['https://Stackoverflow.com/questions/48310337', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/5527137/']
You need to get the values of all the inputs, not just the one that the user is currently typing in. Define a single function that does this, and add it as an event listener for all 3 inputs.

```js
var principal = document.querySelector(".principal");
var percentage = document.querySelector(".percentage");
var time = document.querySelector(".time");
var output = document.querySelector("#result");

function calcInterest() {
  var newPrincipal = parseFloat(principal.value);
  var newPercentage = parseFloat(percentage.value);
  var newTime = parseFloat(time.value);
  if (!isNaN(newPrincipal) && !isNaN(newPercentage) && !isNaN(newTime)) {
    var result = newPrincipal + newTime * newPrincipal * newPercentage / 100;
    output.textContent = result;
  }
}

principal.addEventListener("input", calcInterest);
percentage.addEventListener("input", calcInterest);
time.addEventListener("input", calcInterest);
```

```html
<label for="principal">Principal</label>
<input type="number" class="principal" style="border-color: black;"><br>

<label for="percentage">Percentage</label>
<input type="number" class="percentage" style="border-color: black;"><br>

<label for="time">Time</label>
<input type="number" class="time" style="border-color: black;"><br> Result:
<div id="result"></div>
```
Create function to calculate, and call this function instead of just executing some code. Something like that:

```js
var principal = document.getElementsByClassName("principal")
var percentage = document.getElementsByClassName("percentage")
var time = document.getElementsByClassName("time")
var output = document.querySelector("#result")
var result
var newResult
var finalOutput

var calculate = () => {
  var newPrincipal = principal[0].value;
  result = newPrincipal
  var newPercentage = percentage[0].value
  newResult = result * (newPercentage / 100)
  var newTime = time[0].value
  finalOutput = (newResult * newTime) + Number(result)
}

document.addEventListener('input', function (event) {

    if ( event.target.classList.contains( 'principal' ) ) {
        calculate();
    }

    if ( event.target.classList.contains( 'percentage' ) ) {
        calculate();
    }

    if ( event.target.classList.contains( 'time' ) ) {
        calculate();
    }

    output.innerHTML = `${finalOutput ? finalOutput : ""}`
}, false);
```