JavaScript Arithmetic Expressions

My experience with Java and PHP spans many years, and I have recently delved into JavaScript development as well. This may be a beginner question but can someone help me figure out why this application isn't displaying the interest when the button is clicked? I have been using the w3schools website to learn.

Here is the code:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Interest Calculator</title>
</head>
<body>

<fieldset>
<legend>Interest Calculator</legend>
Enter amount: <input type="text" id="amount" ><br><br>
Interest rate: <input type="text" id="interest"><br><br>
Enter years: <input type="text" id="years"><br><br>
<button onclick="calculate()">Calculate</button>
</fieldset>

<p id="sum"></p>

<script>

function calculate(){

var amount = document.getElementById("amount").value;
var rate = document.getElementById("interest").value;
var years = document.getElementById("years").value;
var sum = amount * (1+rate) ^ years;

var message = "Your total return will be: " + sum;

document.getElementById("sum").innerHTML = message;


}

</script>

</body>
</html>

Your assistance is greatly appreciated,

Adam

Answer №1

To ensure accuracy, it's crucial to explicitly state * when performing calculations. It is atypical for the result of 5(3) = 15 in JavaScript or any programming language. Instead, be sure to specify 5*(3):

var total = amount*(1+rate)^years;

Verified Code

<fieldset>
  <legend>Interest Calculator</legend>
  Enter initial amount: <input type="text" id="amount" ><br><br>
  Interest rate: <input type="text" id="interest"><br><br>
  Enter term (in years): <input type="text" id="years"><br><br>
  <button onclick="calculate()">Calculate</button>
</fieldset>

<p id="total"></p>

<script>
  function calculate(){
    var amount = document.getElementById("amount").value;
    var rate = document.getElementById("interest").value;
    var years = document.getElementById("years").value;
    var total = amount*(1+rate)^years;
    var display = "Your total return will be: " + total;
    document.getElementById("sum").innerHTML = display;
  }
</script>

Fiddle: http://jsbin.com/lovevazaxe

Answer №2

When looking at the code, it appears that the user is utilizing the ^ operator with the intention of using the power-of operator.

In the realm of javascript, the ^ operator actually signifies bitwise XOR, which may not align with what the user desires.

To achieve the power-of operation, one should employ the Math.pow() function instead.

Therefore, you can substitute var sum = amount(1+rate)^years; with:

var sum =  Math.pow(amount*(1+rate),years)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I securely save a user's login information using ExtJS without saving it multiple times?

Currently, I am utilizing Ext.Ajax.request() to access a PHP page that provides user-specific information during the login process. In order to store variables such as cookies and session information in ExtJS, I have created a model with necessary fields a ...

Stop all animations in JS and CSS

Looking for a way to halt all CSS and JavaScript animations, including canvas and webGL effects, on a specific webpage. Some animations can cause slow performance on certain browsers like Opera and Firefox, so I'm seeking a code snippet or guidance o ...

Easily targeting elements and their descendants in jquery: What you need to know!

Within a div, there are nested divs that contain tables and other divs. How can I use jquery to select both the parent div and its children? The parent div has the class "AccordionTitle AccordionTitle-selected". I have attempted the following: var klo=$( ...

Error encountered when extending Typography variant in TypeScript with Material UI v5: "No overload matches this call"

Currently, I am in the process of setting up a base for an application using Material UI v5 and TypeScript. My goal is to enhance the Material UI theme by adding some custom properties alongside the default ones already available. The configuration in my ...

How to align the horizontal title of the yAxis in HighCharts

I have two charts with different yAxis titles. I am trying to align the titles horizontally to the right side of the chart (on the left side of the Y line). However, the alignment only seems to work vertically centered. I actually need the titles to be in ...

What is the best way to apply a Javascript function to multiple tags that share a common id?

I am experimenting with javascript to create a mouseover effect that changes the text color of specific tags in an HTML document. Here is an example: function adjustColor() { var anchorTags = document.querySelectorAll("#a1"); anchorTags.forEach(func ...

Is there a way to dynamically update one input field while another input field is being modified? [HTML / JS]

I have a form with 3 input fields. One of the inputs is disabled, while the other two are enabled. The goal is to combine the values entered in the enabled fields to populate the disabled field. How can this be achieved? Is it possible for the value in th ...

The dividers flicker in and out of view

I have a menu with 7 elements, where clicking on an element causes its content to appear by fading in. If another element is clicked, the current content fades out and the new content fades in. I've successfully implemented this concept for 3 of the 7 ...

Unable to reach the object property while using the $.each method

Upon receiving an object from an ajax request, I am using $.each to iterate through all the appointments in the object. However, I am encountering an issue where the object appears to be undefined within the $.each loop. Here is the code snippet for my req ...

Most effective method for eliminating an item from an array with AngularJs

I have an array of objects that I want to modify by removing multiple objects from it. The following code is currently achieving this successfully, but I'm curious to know if there is a more efficient way to accomplish this task. This process involv ...

Step-by-step guide on how to showcase elements within v-for by clicking on them

In my data array, only the first element is visible by default. Clicking on either the YES or NO button will display the element with the corresponding id of yes_section or no_section (depending on which button was clicked). For instance, if we click on ...

Transferring information in Laravel with the help of Axios and Vue Framework

While following the Laracasts tutorial on integrating Stripe, I noticed that a lot has changed since the release of Laravel 5.4. Although I managed to navigate through most of it, I encountered an issue when trying to submit a payment form using Vue and Ax ...

Is there a way to load all movies in advance when none of the tags are selected?

In my current project, I am working on a feature that involves an array of movie objects. Each movie has a name and tags assigned to it. I want to be able to display movies based on the tags selected by the user. For example, if the user selects the tag "c ...

What is the reason behind the restriction on using capital letters in React project names?

When attempting to create a new project "newRecipeApp" in React, I encountered the following message: npx: installed 91 in 29.359s Could not create a project called "newRecipeApp" because of npm naming restrictions: * name can no longer contain capital ...

Guide on how to use JavaScript to swipe through loaded epub files in both lateral directions

Hello everyone, I have a question about implementing swipe functionality on a loaded epub using JavaScript. I successfully loaded the epub into a div and now I need to enable swipe left and right gestures on that div. I found a jQuery script that should a ...

Looking for assistance in retrieving a document by its reference id from Firestore using ReactJS?

As a newcomer to using firestore and reactjs, I am currently working on creating a basic react code that retrieves documents from 2 different collections. The two collections I am focusing on are: user-habits {email, habitid} habits {habitid, conte ...

Is the callback of $.post not being executed until the loop it's contained in finishes?

I'm working on a stock table that allows users to input the quantity of stock to issue. I have a function that verifies whether or not the database has sufficient stock for each entry in the table. When debugging through the code in Chrome, I noticed ...

How to display 3 items per row in a React table by utilizing a map function loop

Currently, my table using material UI generates one column on each row. However, I would like to display 3 columns as items on each row. Below is the mapping for my table: <TableBody> {this.props.data.slice(page * rowsPerPage, page * rowsPerPage ...

Is it feasible to use HTML to improve IE's tolerance for errors in markup, such as unnecessary tags?

I created a jQuery tabs element in the following way: <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> < ...

Programmatically simulate a text cursor activation as if the user has physically clicked on the input

I have been attempting to input a value into a text field using JavaScript, similar to the Gmail email input tag. However, I encountered an issue with some fancy animations that are tied to certain events which I am unsure how to trigger, illustrated in th ...