CODEWITHSUNDEEP
javascript
Shtarley
Shtarley

Reputation: 391

Event Listener for this scenario

I am new to JavaScript. I have been reading up about event listeners, but I don't know or where to apply it to my code.

I am trying to build a very basic calculator. A user will enter two amounts into two different HTML fields, and it must count the two together. My code is working, except that it doesn't update the final amount once the field values are changed, so I need an event listener. How will I use it in this scenario? I've looked at samples online but it hasn't helped me much.

Am I supposed to put some of my code in a function?

Note: My final global variable called "paytotal" needs to always show the updated results so that I can use this variable anywhere on my page.

My Javascript:

var payamount1 = document.getElementById("amount1").value;
var payamount2 = document.getElementById("amount2").value;
var paytotal = Number(payamount1) + Number(payamount2);
document.getElementById("payment-due").innerHTML = paytotal;

My HTML:

<input type="text" id="amount1" placeholder="enter amount 1">
<input type="text" id="amount2" placeholder="enter amount 2">

<div class="details-row">Total payable: <span id="payment-due"></span></div>

Upvotes: 0

Views: 103

Answers (3)

Sascha A.
Sascha A.

Reputation: 4626

Add an eventlistener on both input-fields and call there a function (calc) in which you have included your code.

var amount1 = document.getElementById("amount1");
var amount2 = document.getElementById("amount2")
amount1.addEventListener('change', calc);
amount2.addEventListener('change', calc);

function calc() {
    var payamount1 = amount1.value;
    var payamount2 = amount2.value;
    var paytotal = Number(payamount1) + Number(payamount2);
    
    document.getElementById("payment-due").innerHTML = paytotal;
}
<input type="text" id="amount1" placeholder="enter amount 1">
<input type="text" id="amount2" placeholder="enter amount 2">
<div class="details-row">Total payable: <span id="payment-due"></span></div>

Upvotes: 1

DCR
DCR

Reputation: 15700

lots of ways to do this. here's one; Be sure to check your result is not NaN

function addUp() {


  var payamount1 = document.getElementById("amount1").value;
  var payamount2 = document.getElementById("amount2").value;

  if (payamount1 != '' && payamount2 != '') {
    var paytotal = Number(payamount1) + Number(payamount2);
    
    
    
    if(!Number.isNaN(paytotal))document.getElementById("payment-due").innerHTML = paytotal;
  }

}
<input type="text" id="amount1" placeholder="enter amount 1" onchange="addUp()">
<input type="text" id="amount2" placeholder="enter amount 2" onchange="addUp()">
<div class="details-row">Total payable: <span id="payment-due"></span></div>

Upvotes: 1

imvain2
imvain2

Reputation: 15857

Event listeners listen to when something happens. In your case, the best event to listen to is input as it will detect everything that you need.

For simplicity, I would give your inputs a class.

And for the javascript this will add the input listener to the inputs.

    var amounts = document.querySelectorAll(".amounts");
    var paytotal = 0;
    amounts.forEach(function(el){
      el.addEventListener("input",function(){
       var payamount1 = document.getElementById("amount1").value;
       var payamount2 = document.getElementById("amount2").value;
        paytotal = Number(payamount1) + Number(payamount2);
       document.getElementById("payment-due").innerHTML = paytotal;
    });
    });
    <input class="amounts" type="text" id="amount1" placeholder="enter amount 1">
    <input class="amounts" type="text" id="amount2" placeholder="enter amount 2">



<div id="payment-due"></div>

Upvotes: 2

Related Questions