Create Percentage Calculator by JavaScript, Using JavaScript Calculate Percentage Calculator, Calculate JavaScript Percentage in JavaScript
Hello Friends, Today I will tell you through this tutorial how you can calculate the percentage through javascript.
So let’s go let me first tell you that people use percentage tools to calculate exams marks.
But through this tutorial, we will try to understand how to create a percentage calculator by javascript
Step 1:- First of all you have to create a html page. You can name him percentage-calculate.html. Then after that you form the form as you have been told below.
percentage-calculate.html
<!DOCTYPE html> <html> <head> <title>Create Percentage Calculator Using JavaScript</title> </head> <body> <h2>Create Percentage Calculator Using JavaScript</h2> Marks Possible Number:<br> <input type="text" id="pointspossible"/> <br> Given Marks Number:<br> <input type="text" id="pointsgiven"/> <br> Percentage:<br> <input type="text" id="pointsperc" disabled/> <br> </body> </html>
Step 2:- Then after that calculate the percentage calculate that you add javascript code inside the body tag of the isi page, I have given you a good code in the same page below.
percentage-calculate.html
<!DOCTYPE html>
<html>
<head>
<title>Create Percentage Calculator Using JavaScript</title>
</head>
<body>
<h2>Create Percentage Calculator Using JavaScript</h2>
Marks Possible Number:<br>
<input type="text" id="pointspossible"/>
<br>
Given Marks Number:<br>
<input type="text" id="pointsgiven"/>
<br>
Percentage:<br>
<input type="text" id="pointsperc" disabled/>
<br>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
$('#pointspossible').on('input', function() {
calculate();
});
$('#pointsgiven').on('input', function() {
calculate();
});
function calculate(){
var Possible = parseInt($('#pointspossible').val());
var pgiven = parseInt($('#pointsgiven').val());
var perc="";
if(isNaN(Possible) || isNaN(pgiven)){
perc=" ";
}else{
perc = ((pgiven/Possible) * 100).toFixed(3);
}
$('#pointsperc').val(perc);
}
});
</script>
</html>