• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar

CodingStatus

- Free Source Code for Web Applications

  • HTML
  • JavaScript
  • jQuery
  • ReactJS
  • Ajax
  • Node.js
  • PHP
  • SQL
  • Interview Questions
  • Installation

Calculate Marks Percentage in JavaScript

September 27, 2021 By Md Nurullah

In this tutorial, you will learn to calculate marks percentage in javascript step by step. So, If you need to provide a feature to calculate the percentage of obtained exam marks automatically after entering total marks & scored marks in the given input fields, then It will be more helpful for you.
calculate marks percentage in javascript

Learn also –

Fill Current Address same as permanent address in javaScript

JavaScript Password Strength Checker in JavaScript

Create Cookie Consent Popup in JavaScript

Detect Internet Connection Using JavaScript

Calculate Percentage of Obtained Marks using JavaScript

Now, let’s start its coding from the next step. But to understand it, you should have a basic understanding of calculating the percentage of a Number.  So I have explained it in the next steps with some examples –

Percentage of a Number

Mathematically, A  percentage is a number that is expressed like a fraction of 100 and denoted by %.

10% of 250 = 250 x 10/100 = 25

5% of 300  = 300 x 5/100 = 15

Exam Marks Percentage

In order to calculate the percentage of total marks, we have to  divide the obtained marks by the total markes of the all subjects and then multiply by 100.

For Example –

200/500 x 100 = 40%

250/500 x 100 = 50%

320/500 x 100 = 64%

339/500 x 100 = 67.80%

Marks Percentage Formula

Marks Percentage = (Obtained Marks/Total Marks) x 100

For Example –

Suppose you have obtained 300 marks out of 500 marks in the examination , then to caluclate total percnetage of your obtained marks using the above marks percentage formula, you will have to divide 300 by 500, and then multiply it by 100.

Marks percentage = (300/500) x 100
                 = 0.60 x 100 = 60%

Therefore, the percentage of marks your obtained marks is 60%

Create Marks Input Fields

Here I have created marks Input fields using Bootsrap4 CDN. So, You can use this code directory in your website. But before it, you have to understand the following points

Input Field  Input Field Id
Total Marks id=”totalMarks”
Obtained Marks id=”obtainedMarks”
Marks Percentage id=”marksPercentage”

Note – If you need to add only input fields then you can copy as it is given and paste it into your existing registration form. It will work well.

<!DOCTYPE html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
 <div class="row">
   <div class="col-sm-4">
    <h3 class="text-primary">Calculate Marks Percentage</h3> 
      
    <!--=== Marks Input Fields=== -->
<div class="form-group">
  <label>Total Marks</label>
  <input type="text" class="form-control" placeholder="Total Marks" id="totalMarks">
  </div>

 <div class="form-group">
 <label>Obtained Marks</label>
     <input type="text" class="form-control" placeholder="Obtained Markes" id="obtainedMarks">
  </div>
  <div class="form-group input-group">
      <input type="text" class="form-control" placeholder="Marks Percentage" id="marksPercentage" disabled>
      <div class="input-group-append">
         <span class="input-group-text">%</span>
      </div>
   </div>
<!--=== Marks Input Fields=== -->

  
 
   </div>
   <div class="col-sm-4"></div>
</div>
</div>


</body>
</html>

Calculate marks percentage

marksPresentagae() – This function can calulate percentage of the obtained marks of the exam marks and display in the result input field.

You can just copy this code and use in your website. Here I have called marksPresentagae() function on focusout event so that it function can execute after filling total marks & obtained marks and can display the result automatically in the precentage input field.

If you need to caluclate exam marks perventage on another event then you can just call this custom function with that events.

<script type="text/javascript">
     
document.addEventListener('focusout', function(event){
    marksPresentagae()
});
 
function marksPresentagae() {

  let totalMarksInput = document.getElementById("totalMarks");
  let obtainedMarksInput = document.getElementById("obtainedMarks");
  let marksPercentageMarksInput = document.getElementById("marksPercentage");

  totalMarks = totalMarksInput.value
  obtainedMarks= obtainedMarksInput.value
    
  if(totalMarks>0 && obtainedMarks>0){
     let tp = (obtainedMarks/totalMarks)*100;
     marksPercentageMarksInput.value=tp.toFixed(2);
  }else{
    marksPercentageMarksInput.value=""
    }
 }
</script>

 

Test It Yourself by Entering Marks

After Implementing previous steps, You can test it yourself by opening in the web broeser and entering total marks and obtained marks in the examination.

Filed Under: JavaScript

Hey there, Welcome to CodingStatus. My Name is Md Nurullah from Bihar, India. I'm a Software Engineer. I have been working in the Web Technology field for 3 years. Here, I blog about Web Development & Designing. Even I help developers to build the best Web Applications.

Primary Sidebar

Latest Tutorials

  • How to Install Express Application Using Express Generator Tool
  • Registration Form using Ajax, PHP & MySQL
  • Filter Data with Checkboxes in PHP & MySQL
  • Filter Data by Category in PHP & MySQL
  • Filter Prices From Low to High in PHP, MySQL

Popular Tutorials

  • JavaScript Word Guessing Game
  • JavaScript Color Picker Chrome Extension
  • How to Create JavaScript Accordion
  • JavaScript Password Strength Checker
  • JavaScript Countdown Timer

Categories

  • Ajax (11)
  • Django (5)
  • HTML (4)
  • Installation (3)
  • Interview Questions (5)
  • JavaScript (20)
  • jQuery (11)
  • Laravel (2)
  • Node.js (23)
  • PHP (42)
  • ReactJS (35)
  • SQL (12)
  • Tips (7)
  • Home
  • About Us
  • Privacy Policy
  • Disclaimer
  • Terms & Conditions
  • Sitemap
  • Contact Us

Copyright © 2023 CodingStatus - All Rights Reserved