We then perform the percentage calculation on these numbers and output the value into the solution input field. When these buttons are clicked the 2 numbers entered into the form are saved as variables. addEventListener( 'click', function ( e) ) Code language: JavaScript ( javascript )įor each of the calculators we’ve added a click event listener to the submit buttons. Code language: HTML, XML ( xml ) document.getElementById( 'calc1-submit') If you just looking for a copy and paste solution a working HTML file with the 3 calculators can be downloaded from here. What is the % increase or decrease between X & Y?Įach calculator has almost identical HTML markup and the only difference in the JavaScript is the maths used to calculate the solution.Here is the sample drop-down list from the ‘cake form’ example.In this post I’ll show you how to create 3 different types of percentage calculators using JavaScript. How to use drop-down list (‘select’ list) in a calculation No reason to continue if we get a match If we get a match then we break out of this loop

For example cake_prices'ĬakeSizePrice = cake_prices.value] if the user choose the 8' cake we set it to 25 we set cakeSizePrice to the value of the selected radio button Here since there are 4 radio buttons selectedCake.length = 4įor( var i = 0 i < selectedCake.length i ++) Get a reference to the cake the user Chooses name=selectedCake': Get a reference to the form id='cakeform' Here, we need to take user's the selection from radio button selection getCakeSizePrice() finds the price based on the size of the cake. To get the form object, we use the id attribute. We use a calculator to perform numerous mathematical operations like addition, subtraction, multiplication in our daily life routine. How to reference a form object in JavaScriptīefore we can do any calculations in the form, we must first have a reference to the form in our JavaScript code. For now, we have our HTML code ready so let’s begin coding the JavaScript. We will discuss this later in the tutorial, but it’s good you know why it’s there.

This function is what does the calculations and updates the price. We call a JavaScript function within the “onclick” and “onchange” events of the form elements.

Javascript calculator