Adding numbers with a click function

Question

Good evening, I am trying to create a simple app to calculate insurance rates. The 1st input is for the value of the item (whole numbers), the 2nd is for the insurance rates which will be in decimal numbers, once the numbers are entered it will do some additional math to get the charges and then post the total on a document on the web page. I can't seem to get the total to appear on the input field. Any help will be greatly appreciated being that this is my very 1st project.

Thank you, Edwin

total.addEventListener('click',() => {
    const rte1 = parseFloat(document.getElementById('val$').value);
    const rte2 = parseFloat(document.getElementById('valRate').value); 
    const surCharge = rte1 * rte2; 
    const ept = surCharge * .036;
    const totalCharge = surCharge + ept;
        
    document.getElementById('price').innerHTML = totalCharge;
});

<p class="coll mt-4 text-primary">Enter Value:</p>
	<input id="val$" type="text" name="rate1">
	
    <p class="coll mt-4 text-primary">Enter Insurance Rate:</p>
	<input id="valRate" type="text" name="rate2">
	
	<!-- Calculate Button -->
	<button onclick="total" type="button" class="btn btn-primary active d-block mx-auto mt-4">Calculate</button>
	
	<p class="coll mt-5 text-primary">Total charges including IPT:</p>
	<input id="price" type="text">

Dylan Vander Berg · Accepted Answer · 2017-04-14 02:59:33Z

1

Just use onClick in the HTML element to call a Javascript function:

function total() {
    const rte1 = parseFloat(document.getElementById('val$').value);
    const rte2 = parseFloat(document.getElementById('valRate').value); 
    const surCharge = rte1 * rte2; 
    const ept = surCharge * .036;
    const totalCharge = surCharge + ept;

    document.getElementById('price').value = totalCharge;
};

<p class="coll mt-4 text-primary">Enter Value:</p>
	<input id="val$" type="text" name="rate1">
	
    <p class="coll mt-4 text-primary">Enter Insurance Rate:</p>
	<input id="valRate" type="text" name="rate2">
	
	<!-- Calculate Button -->
	<button onclick="total()" type="button" class="btn btn-primary active d-block mx-auto mt-4">Calculate</button>
	
	<p class="coll mt-5 text-primary">Total charges including IPT:</p>
	<input id="price" type="text">

You also need to use .value instead of .innerHTML to set the text in an input.

answered Apr 14, 2017 at 2:59

Dylan Vander Berg

1,9191 gold badge22 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Edwin Rafael Castro Over a year ago

Thank you Dylan! Much appreciated. It worked perfectly. I didn't realize i had to put the () in the onclick="total".

Dylan Vander Berg Over a year ago

Yes, because I made total a function, so you are calling the total function onclick.

Simon · Accepted Answer · 2017-04-14 02:59:05Z

0

document.getElementById('price').innerHTML = totalCharge;

should be

document.getElementById('price').value = totalCharge;

answered Apr 14, 2017 at 2:59

Simon

7844 silver badges8 bronze badges

Collectives™ on Stack Overflow

Adding numbers with a click function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related