Choosing a different value in JS leads to the same outdated result being shown

I am currently tackling calculus and encountering an issue with re-selecting values in my calculation. Below is the complete program that I am working on:

Link to Program

After selecting a value and clicking submit, everything works perfectly. However, if the user decides to modify 'cb_amount', s_month, or s_year, then clicks submit again, the code snippet below displays the old result instead of updating it correctly. The rest of the results are accurate. Can someone guide me on how to fix this?

// PAY_START_END_MONTH_FMT message
const PAY_START_END_MONTH_FMT = "If loan start Month is :start ,<br> Final loan paying will be :end ";
let s_month = document.getElementById(elementId.s_month).value;
if (s_month) {
    let s_year = document.getElementById(elementId.s_year).value;
    let date = new Date();
    date.setMonth(s_month - 1);
    date.setFullYear(s_year);
    let startMonth = DateManager.formatDate(date, DateManager.getFormatString().YYYY_MM);

    DateManager.addMonth(date, (years * 12) - 1);
    let endMonth = DateManager.formatDate(date, DateManager.getFormatString().YYYY_MM);
    document.getElementById("pay_start_end_month").innerHTML = PAY_START_END_MONTH_FMT.replace(":start", startMonth).replace(":end", endMonth);
}

// CB_SENTENCE_FMT message
const CB_SENTENCE_FMT = "Combined bonus amount will be :j_actual_cb_ttl. Paying times is :j_cbTimes . mothly paying is :j_monthly_bns_payment";

if (bSecondToLastTtl > 1) {

let j_actual_cb_ttl = ValueUtils.comma(bSecondToLastTtl);
let j_cbTimes = cbTimes;
let j_monthly_bns_payment = ValueUtils.comma(monthly_b);    

document.getElementById("j_cb_sentence").innerHTML = CB_SENTENCE_FMT.replace(":j_actual_cb_ttl", j_actual_cb_ttl).replace(":j_cbTimes", j_cbTimes).replace(":j_monthly_bns_payment", j_monthly_bns_payment);
}
 

Answer №1

Consider revising the variables currently declared as "const" to "let". You can learn more about this distinction at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let. I made some adjustments to your code by forking it and testing; it seems like the data is now being updated correctly based on the new values.

You can view the forked fiddle at https://jsfiddle.net/b5g73x02/. Below are the modifications I made:

let cbTimes = years * 2; //
let diff = amount - downpayment;

let justDevideCbAmount = cb_amount / cbTimes; 
let monthly_b = (Math.floor(justDevideCbAmount / 100) * 100); 
let bSecondToLastTtl = monthly_b * cbTimes;
let paymentTimes = years * 12; 
let interestMod = 10000 + (interest * 100); 
let ttlWInterest = parseInt(((amount - downpayment) * interestMod )/ 10000); 
let ttlWInterestNegativeCb = ttlWInterest - bSecondToLastTtl; 
let jstDevideMonthly = ttlWInterestNegativeCb / paymentTimes; 
let secondToLastMonthlyPayment = (Math.floor(jstDevideMonthly / 100) * 100); 
let firstMonthlyPayment = ttlWInterestNegativeCb - (secondToLastMonthlyPayment * (paymentTimes - 1));
let jKinri = (interest / 100).toFixed(5); 
let kinriFinal = ValueUtils.comma(parseInt(ttlWInterest - (amount - downpayment))); 

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

An interactive data organizing tool on a website

Similar Question: Is there a Spreadsheet-like control for web applications? I am exploring different tools available, unsure of how to implement what I have in mind. Currently, my webpage uses javascript to parse user-provided information. Users copy ...

Unable to bring in a component through entering

There seems to be an issue when importing a module in ReactJS. When I manually type import React from 'react';, it shows an error and the code doesn't work. However, if I copy and paste the same code, it works perfectly fine. What could be c ...

How can a pop-up be positioned to appear in the right bottom corner using jQuery

Is there a way to position a pop-up at the bottom right corner of the window? I have code that centers the pop-up in the window, but I'm looking to place it specifically at the bottom right corner. $(id).css('top', winH - $(id).height()); ...

Is there a way to transform a tabulated tree into JSON using JavaScript?

I've been searching for a solution, but I have come to the conclusion that this question is quite peculiar. How can I convert the following text file using tabs for spacing: parent child child parent child grandchild grand ...

Why doesn't Material-UI seem to understand the theme.spacing function?

Issue with Material-UI's theme.spacing function I've encountered a problem while using Material-UI's theme.spacing function in a React application. It seems that the spacing function is not being recognized. The Javascript error message st ...

The issue with Angular JS is that it fails to refresh the select and input fields after selecting a date

Currently utilizing Angular JS and Bootstrap, I have a query regarding updating the input for a datepicker calendar and a select from a function. The values are being successfully updated, however, they do not reflect on their respective inputs. It seems ...

The Bootstrap navigation menu fails to extend the parent div when toggled

When I toggle the button to show the menu on small screens, the menu overflows the parent div with id=contents instead of pushing it down. How can this issue be fixed? Here is the code: <body> <nav id="header" class="navbar navbar-default"& ...

The toArray function in MongoDB does not support the use of Array push

I'm attempting to loop through all documents within collections, store them in a global variable, but it seems like the push() function is not working and returning an empty array [] inside of toArray(). Any ideas? const mongo = require('mongodb ...

Continuously monitor the condition in my function

I'm encountering an issue with my jQuery function where it animates a progress bar from 0 to 100 when it's visible on the screen. The problem arises when the progress bar is not initially visible upon page load, as the animation will never trigge ...

Enhancing the node module of a subpackage within Lerna: A step-by-step guide

I recently integrated lerna into my workflow to streamline the installation of all node modules for multiple sub packages with just one command. Currently, I'm only utilizing the lerna bootstrap feature. Here's a snippet from my lerna.json: { & ...

Form with missing input fields submits nothing to the server

I created a Node project with a single view page for users to access information. When I use an HTML form to send data, the content is empty. I have verified multiple times using Postman that the information is being saved successfully when sent with the P ...

Tips for replacing default arrow icons with 'Previous' and 'Next' buttons in a Material-UI pagination element

I've been struggling to find a solution with my code provided below. Despite multiple attempts, the issue remains unresolved. import React from "react"; import { gridPageCountSelector, gridPageSelector, gridPageSizeSelector, useGridA ...

Unexpected behavior from JSON.stringify causing it to not return the desired objects

I have been experimenting with Node.js and Websockets lately. Making progress, but I encountered an unusual issue with JSON.stringify (client side). I use JSON.stringify to see which object properties the server is returning. For instance, this is the co ...

How to Send Data to ASP.NET MVC Controller Using AJAX Request with jQuery

I am trying to send parameters to a controller from jQuery, but I am struggling with it. The call works fine without parameters when the URL is just /SurveySection/EditLocalization. Shouldn't it be something like this: /SurveySection/EditLocalization? ...

Ways to obtain the chosen option from a drop-down menu using jQuery

I'm currently experiencing an issue where the selected value of a drop down is not being displayed correctly. Instead of selecting the dropdown value, it's adding another value to the list. Below is the code snippet I'm using: JQuery var ...

Get information that has been uploaded using ajax

I need help with my code for sending data via ajax to an update.php page. $(document).ready(function() { $("#modify").click(function() { var a = $("#a").val(); var b = $("#b").val(); var c = $("#c").val(); $.ajax({ type: "POST", ...

What strategies can be used to reduce the frequency of update calls?

I'm currently working on a Tetris demo using ThreeJs. To render the game, I am utilizing requestAnimationFrame. Below is a snippet of the code: game.prototype.render = function(){ var thisObj = this; requestAnimationFrame( function() {thisObj.rend ...

Looking to eliminate the unchecked checkbox value from the list using jQuery?

After selecting a checkbox, the text/value is displayed in an li element. However, if I uncheck the first box and check the second one, I want to remove the text/value associated with the first checkbox as shown below: View Image Here Here is my code sni ...

Developing a search feature with Mongo and NodeJS

Currently, I've been immersed in teaching myself the ropes of a MERN CRUD project. However, I have yet to tackle the front end side of things. On the backend, I have successfully implemented all basic CRUD functionalities with the API. My current hurd ...

Are elements loaded and hidden by ng-hide and ng-show, or does loading only occur with ng-show?

Is this method of programming effective for handling large elements such as 10 mb images? Are there alternative solutions that would work better? ...