46. Percentage Calculator Algorithm And Prevent Default with JS - Full stack web development Course

In this FullStackWebDevelopment tutorial series video we are going to print the result using #percentage #calculator algorithm using #javascript and learn about preventDefault().

We perform operations on the input values to calculate the percentage which is then printed on the screen. But there is a situation in which after the result appears on the screen the input values disappear i.e. the page is refreshed. We want to avoid this situation and to do this we use preventDefault() which prevents the screen from refreshing.

The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur. Now our Percentage Calculator is complete and ready to run.

So, with this video we come to the end of learning JavaScript. We have covered almost all the necessary and important topics which are frequently used while developing any sort of website. Below is a quick summary of what we have covered in this course:

Summary Of the JavaScript section(video 31-46):

- Video 31: Introduction to Basics of JavaScript

- Video 32: References of various websites to learn JavaScript

- Video 33: Javascript comments and How to link scripts

- Video 34: Javascript Variables and Strings

- Video 35: Javascript Numbers

- Video 36: JavaScript Comparison operator

- Video 37: JavaScript Logical Operator

- Video 38: JavaScript Arrays

- Video 39: JavaScript Loops

- Video 40: JavaScript Functions

- Video 41: Javascript Objects

- Video 42: Javascript Bind

- Video 43: Percentage Calculator And Setting Up the Form with JS

- Video 44: Percentage Calculator and Grabbing Elements with JS

- Video 45: Percentage Calculator using EventListener in JS

- Video 46: Percentage calculator algorithm and prevent default withJS

----------------------------

Week 1 : Day 7
Section 5 : Learning to Code With Javascript
Tutorial 46: Percentage Calculator Algorithm And Prevent Default with Javascript

----------------------------
Do subscribe and hit Bell Icon
----------------------------

Follow us in social media handles for opportunities and code related support.

----------------------------

Got a question on the topic? Please share it in the comment section below and our experts will answer it for you.

[RsD]

The fields should also be valid numbers, I think something like this should be fine:

var num1 =
var num2 =

function isDigit(string){
if(string && string*0 == 0){
return true;
}
else{
return false;
}
}

, function(event){
if (isDigit(num1.value) && isDigit(num2.value)){
var n1 = parseFloat(num1.value);
var n2 = parseFloat(num2.value);

}else{
alert("Insert valid numbers");
}

[gungusgaramoti]

great tutorial, I spent most of my time styling in css for fun and managed to throw together a quick and easy reset button too.

[aidencolling]

Thanks a million!! Nice intro to JS :-)

[shruthiabirami]

function receives the parameter event. What is event ?

[anupamabali]

Error showing on document due to which the result is coming Nan

[ritiksoni]

first i tried in my way to code this cal but getting issues then after i copy-paste even the whitespace and getting error like "document does not define" GG

[mdamirsohail]

Uncaught TypeError: Cannot read property 'addEventListener' of null

Getting this error
How to fix it?

[azharhasan]

Hello, innerText isn't working for me. :(

[ramisahoori]

I think "if(!numField1.value || !numField2.Value) " is no longer working. maybe you can use "if(numField1.value === null || numField2.Value === null)" to get it working

[BasilTarek]

I think you should add another condition to check if it is a valid number and greater than Zero:

form.addEventListener('submit', function(event) {

// Checking for null and undefined
if (!num1.value || !num2.value){
alert("Please enter values in the fields!");
}
else if(! (num1.value > 0) || ! (num2.value > 0) ){
resultField.innerText = "Invalid input.. Enter Numbers > 0"
event.preventDefault();
} else {
var x = num1.value;
var y = num2.value;
resultField.innerText = "Answer: " + (x / y * 100) + "%";
// Preventing the default behavior of refreshing the page in forms
event.preventDefault();
}
});