Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make my javascript calculator calculate decimal numbers?

Currently my simple javascript calculator is capable of calculating whole numbers. However it is incapable of doing so with decimal numbers like 3,4 or 9,2 etc... getal1 & getal2 stand for number1 & number2. The functions are plus, minus, multiply, and divide respectively.

function plus()
{
	var getal1 = document.getElementById('getal1').value;
	var getal2 = document.getElementById('getal2').value; 
	document.getElementById('resultaat').value=parseInt(getal1) +  parseInt(getal2);
	document.form1.submit();
}
  
function min()
{
	var getal1 = document.getElementById('getal1').value;
	var getal2 = document.getElementById('getal2').value; 
	document.getElementById('resultaat').value=parseInt(getal1) - parseInt(getal2);
	document.form1.submit();
}
  
function keer()
{
	var getal1 = document.getElementById('getal1').value;
	var getal2 = document.getElementById('getal2').value; 
	document.getElementById('resultaat').value=parseInt(getal1) * parseInt(getal2);
	document.form1.submit();
}
  
function delen()
{
	var getal1 = document.getElementById('getal1').value;
	var getal2 = document.getElementById('getal2').value; 

	document.getElementById('resultaat').value=parseInt(getal1) / parseInt(getal2);
	document.form1.submit();
}
<!doctype html>
<html>
	<head>
		<title>
			Oefening calculator
		</title>
		<script src="Javascript.js">
		</script>
		<link rel="stylesheet" type="text/css" href="StyleSheet.css">
	</head>
		<body>
		
			<div id="calculator">
			
			<!-- Invoervelden getal1 en getal2 -->
				<form id="point1">
					<label for="getal1">
						Geef 1e getal :
					</label>
					<input type="number" name="getal1" id="getal1">
				<br />
					<label for="getal2">
						Geef 2e getal :
					</label>
					<input type="number" name="getal2" id="getal2">
				</form>
				
			<!-- De som knoppen -->
			<div id="knoppen">
				<button onClick="plus()">
					+
				</button>
				<button onClick="min()">
					-
				</button>
				<button onClick="keer()">
					x
				</button>
				<button onClick="delen()">
					/
				</button>
			</div>
				<br />
				
			<!-- Het resultaat tekstblok -->
				<form id="point3">
					<label for="resultaat">
						Resultaat
					</label>
					<input type="number" name="resultaat" id="resultaat">
				</form>
				
			</div>
			
		</body>
</html>
like image 517
Muffin Man Avatar asked Oct 24 '25 09:10

Muffin Man


1 Answers

Change parseInt to parseFloat. parseInt is integer numbers, not decimals, and it ignores the decimals when users enter decimal numbers.

Example for your plus function:

function plus() {
    var getal1 = document.getElementById('getal1').value;
    var getal2 = document.getElementById('getal2').value;
    document.getElementById('resultaat').value = parseFloat(getal1) + parseFloat(getal2);
    document.form1.submit();
}
like image 139
Maihan Nijat Avatar answered Oct 26 '25 00:10

Maihan Nijat



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!