Simple JavaScript Calculator

Question

Simple JavaScript Calculator

I'm currently working on a basic JavaScript Mortgage calculator, but I'm facing some challenges. I haven't implemented the math yet and I'm struggling to display the final sum (x + y + z) below the form after submission. The reset form button also doesn't seem to be working. Can anyone offer assistance? Thank you!

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- This is assign05.html -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> JavaScript Mortgage Calculator </title>
    <script>

    // Assign values to variables
    function myFunction() {
        var x = parseInt(document.getElementById("apr").value);
        var y = parseInt(document.getElementById("loanTerm").value);
        var z = parseInt(document.getElementById("loanAmount").value);
    }

    //Display the total sum
    function display(x, y, z) {
        var num = x + y + z;
        var n = num.toString();
        document.getElementById("total").innerHTML = n;
    }

    // Validate the form
    function validateForm(x, y, z) {
        var x = document.forms["myForm"]["apr"].value;
        var y = document.forms["myForm"]["loanTerm"].value;
        var z = document.forms["myForm"]["loanAmount"].value;

        // If statements
        if (x==null || x=="") {
            alert("APR must be filled out");
            document.getElementById("apr").focus();
            return false;
        }
        else if (y==null || y=="") {
            alert("Loan Term must be filled out");
            document.getElementById("loanTerm").focus()
            return false;
        }
        else if (z==null || z=="") {
            alert("Loan Amount must be filled out");
            document.getElementById("loanAmount").focus()
            return false;
        }
        else {
            // Call and display the sum. (This isn't working)
            document.getElementById("demo").innerHTML = display(x, y, z);
        }

        //Reset the form (this isn't working)
        function resetForm() {
            document.getElementById("myForm").reset();
        }
    </script>
</head>
<body onLoad=document.getElementById("apr").focus();>
    <form name="myForm" action="" onsubmit="return validateForm()" method="post">
        APR: <input type="number" id="apr" value=""><br/>
        Loan Term: <input type="number" id="loanTerm" value=""><br/>
        Loan Amount: <input type="number" id="loanAmount" value=""><br/>

        <button onclick="myFunction()">Calculate Payment Button</button>
        <input type="button" onclick="resetForm()" value="Reset form">
    </form>
</body>
</html>

javascript calculator

Answer 1

Answer №1

Here are a few key points to consider in the code you provided:

The validateForm function is not closed properly, causing a syntax error
The HTML does not contain any element with the id myForm, making the reset function ineffective

I made some adjustments to your code. You can try the following:

HTML

<form id="myForm" name="myForm" action="" onsubmit="validateForm(); return false;" method="post">
      APR: <input type="number" id="apr" value=""><br/>
      Loan Term: <input type="number" id="loanTerm" value=""><br/>
            Loan Amount: <input type="number" id="loanAmount" value=""><br/>

      <button onclick="myFunction()">Calculate Payment Button</button>
      <input type="button" onclick="resetForm()" value="Reset form">
</form>
<div id="total"></div>

JS

// Store values in variables
function myFunction() {
    var x = parseInt(document.getElementById("apr").value);
    var y = parseInt(document.getElementById("loanTerm").value);
    var z = parseInt(document.getElementById("loanAmount").value);
}

// Display the total sum
function display(x, y, z) {
    var num = x + y + z;
    var n = num.toString();
    document.getElementById("total").innerHTML = n;
}

// Form validation
function validateForm(x, y, z) {
    var x = parseInt(document.forms["myForm"]["apr"].value);
    var y = parseInt(document.forms["myForm"]["loanTerm"].value);
    var z = parseInt(document.forms["myForm"]["loanAmount"].value);

    // Check for empty fields
    if (x==null || x=="") {
        alert("APR must be filled out");
        document.getElementById("apr").focus();
        return false;
    }
    else if (y==null || y=="") {
        alert("Loan Term must be filled out");
        document.getElementById("loanTerm").focus()
        return false;
    }
    else if (z==null || z=="") {
        alert("Loan Amount must be filled out");
        document.getElementById("loanAmount").focus()
        return false;
    }
    else {
        // Call and display the sum (currently not functioning)
        display(x, y, z);
    }
    return false;
}

// Reset the form (currently not functioning)
function resetForm() {
    document.getElementById("myForm").reset();
}

Answer 2

Here are a few key points to consider in the code you provided:

The validateForm function is not closed properly, causing a syntax error
The HTML does not contain any element with the id myForm, making the reset function ineffective

I made some adjustments to your code. You can try the following:

HTML

<form id="myForm" name="myForm" action="" onsubmit="validateForm(); return false;" method="post">
      APR: <input type="number" id="apr" value=""><br/>
      Loan Term: <input type="number" id="loanTerm" value=""><br/>
            Loan Amount: <input type="number" id="loanAmount" value=""><br/>

      <button onclick="myFunction()">Calculate Payment Button</button>
      <input type="button" onclick="resetForm()" value="Reset form">
</form>
<div id="total"></div>

JS

// Store values in variables
function myFunction() {
    var x = parseInt(document.getElementById("apr").value);
    var y = parseInt(document.getElementById("loanTerm").value);
    var z = parseInt(document.getElementById("loanAmount").value);
}

// Display the total sum
function display(x, y, z) {
    var num = x + y + z;
    var n = num.toString();
    document.getElementById("total").innerHTML = n;
}

// Form validation
function validateForm(x, y, z) {
    var x = parseInt(document.forms["myForm"]["apr"].value);
    var y = parseInt(document.forms["myForm"]["loanTerm"].value);
    var z = parseInt(document.forms["myForm"]["loanAmount"].value);

    // Check for empty fields
    if (x==null || x=="") {
        alert("APR must be filled out");
        document.getElementById("apr").focus();
        return false;
    }
    else if (y==null || y=="") {
        alert("Loan Term must be filled out");
        document.getElementById("loanTerm").focus()
        return false;
    }
    else if (z==null || z=="") {
        alert("Loan Amount must be filled out");
        document.getElementById("loanAmount").focus()
        return false;
    }
    else {
        // Call and display the sum (currently not functioning)
        display(x, y, z);
    }
    return false;
}

// Reset the form (currently not functioning)
function resetForm() {
    document.getElementById("myForm").reset();
}

Answer 3

Answer №2

There were several issues with your code that need to be addressed. Here are the main points:

The validateForm function is not properly closed. It should look something like this:

function validateForm(x, y, z) {
    var x = document.forms["myForm"]["apr"].value;
    var y = document.forms["myForm"]["loanTerm"].value;
    var z = document.forms["myForm"]["loanAmount"].value;

    // If statements
    if (x==null || x=="") {
        alert("APR must be filled out");
        document.getElementById("apr").focus();
        return false;
    }
    else if (y==null || y=="") {
        alert("Loan Term must be filled out");
        document.getElementById("loanTerm").focus()
        return false;
    }
    else if (z==null || z=="") {
        alert("Loan Amount must be filled out");
        document.getElementById("loanAmount").focus()
        return false;
    }
    else {
        // Call and display the sum. (This isn't working)
        document.getElementById("demo").innerHTML = display(x, y, z);
    }
} //end of function definition

You are passing the values of inputs to the display function as strings. Make sure to parse them as integers in your validateForm method.
In the resetForm method, you are trying to reference the form using
```
document.getElementById("myForm")
```
, but the form element does not have that ID.
You can eliminate the myFunction() that is called when the "CalculatePayment" button is clicked, and instead call the validateForm method there.
There is no div with the IDs "demo" or "total" that you seem to be writing to. Additionally, you are redundantly writing to a div in the display function and then again in this line:
```
 document.getElementById("demo").innerHTML = display(x, y, z); 
 //display function already writes to a div. This is redundant
```

Taking these points into consideration, I've created a basic JSFiddle that should work as intended with minimal adjustments to your code. I hope this helps guide you in the right direction.

Answer 4

There were several issues with your code that need to be addressed. Here are the main points:

The validateForm function is not properly closed. It should look something like this:

function validateForm(x, y, z) {
    var x = document.forms["myForm"]["apr"].value;
    var y = document.forms["myForm"]["loanTerm"].value;
    var z = document.forms["myForm"]["loanAmount"].value;

    // If statements
    if (x==null || x=="") {
        alert("APR must be filled out");
        document.getElementById("apr").focus();
        return false;
    }
    else if (y==null || y=="") {
        alert("Loan Term must be filled out");
        document.getElementById("loanTerm").focus()
        return false;
    }
    else if (z==null || z=="") {
        alert("Loan Amount must be filled out");
        document.getElementById("loanAmount").focus()
        return false;
    }
    else {
        // Call and display the sum. (This isn't working)
        document.getElementById("demo").innerHTML = display(x, y, z);
    }
} //end of function definition

You are passing the values of inputs to the display function as strings. Make sure to parse them as integers in your validateForm method.
In the resetForm method, you are trying to reference the form using
```
document.getElementById("myForm")
```
, but the form element does not have that ID.
You can eliminate the myFunction() that is called when the "CalculatePayment" button is clicked, and instead call the validateForm method there.
There is no div with the IDs "demo" or "total" that you seem to be writing to. Additionally, you are redundantly writing to a div in the display function and then again in this line:
```
 document.getElementById("demo").innerHTML = display(x, y, z); 
 //display function already writes to a div. This is redundant
```

Taking these points into consideration, I've created a basic JSFiddle that should work as intended with minimal adjustments to your code. I hope this helps guide you in the right direction.

Answer 5

Answer №3

Converting num to a string with String(num) is more effective than using 123.toString()
In the display() function, make sure to return a value if you intend to use the return result.
Convert the variables x, y, and z from strings to numbers before performing any calculations.
Make sure to update

Answer 6

Converting num to a string with String(num) is more effective than using 123.toString()
In the display() function, make sure to return a value if you intend to use the return result.
Convert the variables x, y, and z from strings to numbers before performing any calculations.
Make sure to update

Answer 7

Answer №4

If you're looking to create a reset button, it's simply a matter of implementing it as a basic button element. Here's an example:

<button>Reset Form</button>

By clicking this button, the entire content of the form will be cleared.

Answer 8

If you're looking to create a reset button, it's simply a matter of implementing it as a basic button element. Here's an example:

<button>Reset Form</button>

By clicking this button, the entire content of the form will be cleared.

Answer 9

Answer №5

Ensure you add an id attribute to your form element. Use id="myForm" to make the reset button work correctly.
Make sure to properly close your validation function.
Don't forget to include a section for displaying your results.

Answer 10

Ensure you add an id attribute to your form element. Use id="myForm" to make the reset button work correctly.
Make sure to properly close your validation function.
Don't forget to include a section for displaying your results.

Answer 11

Answer №6

After reviewing your code, it appears that you are aiming to showcase the total of x, y, z in the blank div with an ID of total towards the conclusion of your HTML code. Instead of using innerHTML, have you considered utilizing textContent to display your result? Additionally, please remember to set your buttons as submit type within the form. If you do so, you will need to utilize the built-in JavaScript function preventDefault(event); at the beginning.

Answer 12

After reviewing your code, it appears that you are aiming to showcase the total of x, y, z in the blank div with an ID of total towards the conclusion of your HTML code. Instead of using innerHTML, have you considered utilizing textContent to display your result? Additionally, please remember to set your buttons as submit type within the form. If you do so, you will need to utilize the built-in JavaScript function preventDefault(event); at the beginning.

Simple JavaScript Calculator

Answer №1

HTML

JS

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

The @RequestParam annotation seems to be failing to retrieve a value

Patiently waiting for the component variable to be assigned through subscription

What is the best way to retrieve JavaScript variable data from a GDownloadUrl callback function?

Attempting to transmit a text message to a PHP script using Ajax

Utilizing Django to send post requests to an external API in various views

What is the method for ending the mouseleave effect?

Tips for wiping clean and restarting data in a modal?

Having trouble getting the onClick event to trigger in React?

Unable to retrieve a particular file from S3 while utilizing Strongloop

Discover the steps to execute a continuous loop of animations on a singular component using framer-motion

Elevate the value of a particular element's variable through the execution of a function

Maintain user input within the table following a page refresh

How come the item I just inserted into a JavaScript array is showing up as undefined when I try to retrieve it immediately after adding it?

A guide on cropping and uploading images using ejs and Node.JS

What is the best way to display nested JSON in JSX within a React Native application?

Sending data through AJAX

Should I serialize a 2D array in JSON format and send it as two separate arrays, or is

Issue: The element '[object Object]' is of type 'object', which is not supported by NgFor. NgFor only works with Iterables like Arrays. - Problem encountered in an Ionic Project

Daily loop countdown timer

After generating the dist folder using Webpack, how can we then transfer the bundle.js and css file into the statics folder?