Calculate the percentage using JavaScript, then convert the percentage back to the target value

In one place, I am determining the percentageDifference by adding the baseValue and targetValue. However, in another location, I am calculating the targetValue using the baseValue and percentageDifference. The problem I encounter is that the result of the first calculation for the percentageDifference does not match the targetValue obtained from the second calculation.

How can I ensure that all calculations consistently use the same 3 values?

// Calculate targetValue

let baseValue = 50.8998;
let percentageDifference = 0.01;
let change = (percentageDifference / 100.0) * baseValue;
let targetValue = baseValue + change;

// Calculate percentageDifference

let baseVal = 50.8998;
let targetVal = 55.7878;
let percentDiff = Math.abs(baseVal - targetVal) / baseVal;
let percDiff = percentDiff * 100.0;

Answer №1

Functioning properly after removing Math.abs and simplifying the numbers

//calculate percentageDifference
let startingValue = 50;
let endValue = 75;
let difference = (endValue - startingValue) / startingValue;
let percentageChange = difference * 100;
console.log('percentageChange', percentageChange, '. From', startingValue, 'to', endValue)

//calculate endValue
let initialAmount = 50;
let percentChange = 50;
let increase = (percentChange / 100) * initialAmount;
let finalAmount = initialAmount + increase;
console.log('finalAmount', finalAmount)

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

What could be causing the alteration of my JSON data when sent through a WEB.API Ajax request?

Before Ajax Call: "{ "UnitOfMeasureRelatedUnitDataInbound": [ { "Name": "test", "Active": true, "UnitOfMeasureTypeID": "dd89f0a0-59c3-49a1-a2ae-7e763da32065", "BaseUnitID": "4c835ebb-60f2-435f-a5f4-8dc311fbbca0", "BaseUnitName": null, ...

Troubleshooting issue with setting variables in Firefox's JavaScript

I have created a small JavaScript script that defines a value (referred to as stock), which I want to set as the maximum in a dropdown list. It will be set as the maximum value if it exceeds 6. Below is the code snippet: <script type="text/javascript" ...

What is the easiest way to retrieve a basic date with the month represented by a numerical

Struggling to retrieve the date in the format "Oct 29". I attempted using split but it varies every day. This is what I've come up with so far. let currentDate = new Date().toLocaleDateString('en-US', { month: 'short', day: 'n ...

Modal does not close

I am experiencing an issue with closing a modal. I have checked jQuery and everything seems to be working fine. Currently, I am using version 1.12.4 and have the following script tag in the head of my code: <script src="https://ajax.googleapis.com/aja ...

Angular Satellizer causing issues with Facebook login on mobile devices

Issue Currently, I'm developing an application using Angular and have successfully integrated Facebook login through Satellizer. The functionality works flawlessly on desktop browsers; however, when accessed from mobile devices, it tends to be unreli ...

Using ASP.NET MVC with JQuery to find the closest HiddenFor value

My current table structure is as follows: <table class="table table-bordered"> @for (var i = 0; i < Model.Count; i++) { <tr> <td width="25px"> @if (!Model[i].Letter.Equ ...

Using the DRY principle in JavaScript to handle dynamic fields

Recently delving into Javascript, I encountered a dynamic field script that allows for adding and subtracting fields with the click of a button. The functionality is effective and serves its purpose well. $(document).ready(function() { var max_fields ...

Using HTML, CSS, and JavaScript, the main tab must include nested subtabs to enhance navigation and

When a user clicks on a tab, another tab should open within the main tab. Depending on the selection in the second tab, input fields should appear while others hide. Something similar to the nested tabs on expedia.com. I have experimented with the tab vie ...

What could be the reason behind the failure of this computed property to update in my Vue 3 application?

As I transition from Vue's Options API to the Composition API, I decided to create a small Todo App for practice. Within App.vue, my code looks like this: <template> <div id="app"> <ErrorMessage v-if="!isVali ...

Angular project icons not displaying in the browser

My current project in Angular was functioning properly until recently. I am facing an issue where the images are not being displayed on the browser when I run ng serve, resulting in a 404 error. Interestingly, everything else seems to be working fine witho ...

Tips for modifying the color of a query term in HTML

Within my HTML file, I have <p class = "result"> {{searchResult}} </p> where {{searchResult}} represents the result of a search term. If I search for the term "hot", {{searchResult}} would display a string containing the word "hot" in a ...

Is it necessary for the raycaster to be positioned within the render() function at all times?

Looking to capture the mouse double-click event's location and generate a 3D object in that spot within the scene. My understanding is that the raycaster, which is in the render() function, constantly updates the mouse location. I am interested in ha ...

Combining array elements into sets of n

I am facing a challenge with an array manipulation task. let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]; My goal is to divide this array into a specified number of smaller arrays such that each new array contains the same number of elements ...

Deleting items from the DOM using JavaScript

I am retrieving all the list elements from a menu in order to eliminate the ones that I do not want. let prodMenu = document.getElementsByClassName("productMenu-category"); for (let i = 0; i < prodMenu.length; i++) { if(i > 0 && ...

Mastering the Art of Accelerating getJSON Array Data

Currently, I am facing a challenge with retrieving a large array (4MB) of data from the server side. I have been utilizing the jQuery getJSON method to obtain the array data and display it on the browser. However, this process has proven to be quite slow ...

Upon successful authentication, the WebAuthenticationBroker.authenticateAndContinue function does not activate the app

I'm attempting to implement Facebook, Twitter, and Google login using WebAuthenticationBroker.authenticateAndContinue. The authentication page is displayed successfully, but once the authentication is complete, the activated event is not triggered and ...

Attempting to replicate the action of pressing a button using Greasemonkey

I am currently working on a greasemonkey script to automate inventory updates for a group of items directly in the browser. I have successfully implemented autofill for the necessary forms, but I am facing challenges with simulating a click on the submissi ...

Relocating to new pages as WebSocket connection terminates and then reconnects

Currently working on a React project with Vite, encountering an issue where the websocket connection closes and re-establishes when navigating to another page using the sidebar. Main.tsx :- import ReactDOM from 'react-dom/client'; import App fro ...

What could be causing audio playback issues in Expo-AV in React Native?

I'm in the process of developing an app that functions as a soundboard and plays various sounds when different buttons are pressed. To my surprise, instead of the audio playing, I encountered an error message that read: Possible Unhandled Promise Reje ...

Implementing an event handler within a functional component using hooks in React

I'm currently exploring functional components and hooks. I have a component that retrieves an array of quotes from an API and is supposed to randomly select one to pass as a prop to a child component named "Quote". import React, {useState, useEffect} ...