How to get input data dynamically without using <button>

I am creating compound interest calculator.
I have selected input fields using document. querySelector, but now how to get user inputs dynamically to perform calculations

An input will have a value you can access:

document. querySelector('input').value

document.getElementById(‘textboxId’).value will help you get data that the user enters in the textboxes. you can then convert it to number by using parseInt() method.

If you’d like it to happen dynamically (so the user doesn’t have to click some button), consider listening to a different event. For example, the change or input event on that input element itself might be worth looking into (I’d suggest https://developer.mozilla.org and search for either event).

it is not working as intended.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main class="container">
      <section>
        <h3 id="main-heading">Compund Interest Calculator</h3>
        <p>
          Compound Interest was called the 8th Wonder of the World by Albert
          Einstien. It is what makes your money grow so that even small amounts
          can over time create a huge corpus. ET Money’s compound interest
          calculator is a free, online tool that you can use to find out how
          your small savings will accumulate over time to make you wealthy.
        </p>
        <div class="main">
          <form class="form">
            <p>I want to invest</p>
            <input
              type="number"
              class="investment-amount"
              placeholder="Rs. per month"
              step="1000"
              min="0"
            />
            <p>Expected rate of interest (p.a.)</p>
            <input
              type="number"
              class="expected-interest"
              placeholder="%"
              min="0"
            />
            <p>Investment Period</p>
            <label>Years</label>
            <input type="number" id="years" placeholder="years" min="0" />
            <label>Months</label>
            <input
              type="number"
              id="months"
              placeholder="months"
              max="11"
              min="0"
            /><br />
            <!-- <button type="submit" class="submit-btn">Submit</button> -->

            <p>Maturity Amount Rs.<span class="maturity-amount">0</span></p>
          </form>
        </div>
      </section>
    </main>
    <script src="script.js"></script>
  </body>
</html>

let investmentAmount = parseInt(

document.querySelector(".investment-amount").value

);

const expectedInterest = parseInt(

document.querySelector(".expected-interest").value

);

const years = parseInt(document.querySelector("#years").value);

const months = parseInt(document.querySelector("#months").value);

const maturityAmount = document.querySelector(".maturity-amount");

const input = document.querySelectorAll(“input”);

const form = document.querySelector(".form");

const finalAmount = function () {

let amount = Math.floor(

investmentAmount * (1 + expectedInterest / 100) ** years

);

console.log(amount);

maturityAmount.innerHTML = amount;

};

input.forEach((field) => {

field.addEventListener(“input”, finalAmount);

});