JavaScript conditional calculation mechanism

Question

JavaScript conditional calculation mechanism

Here is the code snippet I am referring to:

function myFunction() {
    var x = document.getElementById("ins-feet").value;

    if(x >= 0 && x <= 1499) {
        document.getElementById("show-cost").innerHTML = "Cost: $" + 300;
    } else if(x >= 1500 && x <= 1999) {
        document.getElementById("show-cost").innerHTML = "Cost: $" + 320;
    } else if(x >= 2000 && x <= 2500) {
        document.getElementById("show-cost").innerHTML = "Cost: $" + 340;
    } else if(x > 2500) {
        var additionalCost = (x - 2500) * 0.10;
        document.getElementById("show-cost").innerHTML = "Cost: $" + (340 + additionalCost);
    }

}

I need help with the last line. When x is greater than 2500, the "show-cost" will display 340 plus an additional 0.10 for every increment. For example, if x > 2501, the cost would be 340.1, and for x > 2502, the cost would be 340.2, and so on.

javascript calculator

Answer 1

Answer №1

It's not as complicated as it seems:

First, find the difference between x and 2500, then perform a simple subtraction.

Next, multiply 0.1 by that difference, like this:

340 + 0.1 * (x - 2500)

To avoid any concatenation issues, make sure to enclose it in parentheses:

"Cost: $" + (340 + 0.1 * (x - 2500))

Your function should look like this:

function calculateCost() {
    var x = document.getElementById("ins-feet").value;

    if(x>=0 && x<=1499) {
        document.getElementById("show-cost").innerHTML = "Cost: $" + 300;
    } else if(x>=1500 && x<=1999) {
        document.getElementById("show-cost").innerHTML = "Cost: $" + 320;
    } else if(x>=2000 && x<=2500) {
        document.getElementById("show-cost").innerHTML = "Cost: $" + 340;
    } else if(x>2500) {
        document.getElementById("show-cost").innerHTML = "Cost: $" + (340 + 0.1 * (x - 2500));
    }

}

Answer 2

It's not as complicated as it seems:

First, find the difference between x and 2500, then perform a simple subtraction.

Next, multiply 0.1 by that difference, like this:

340 + 0.1 * (x - 2500)

To avoid any concatenation issues, make sure to enclose it in parentheses:

"Cost: $" + (340 + 0.1 * (x - 2500))

Your function should look like this:

function calculateCost() {
    var x = document.getElementById("ins-feet").value;

    if(x>=0 && x<=1499) {
        document.getElementById("show-cost").innerHTML = "Cost: $" + 300;
    } else if(x>=1500 && x<=1999) {
        document.getElementById("show-cost").innerHTML = "Cost: $" + 320;
    } else if(x>=2000 && x<=2500) {
        document.getElementById("show-cost").innerHTML = "Cost: $" + 340;
    } else if(x>2500) {
        document.getElementById("show-cost").innerHTML = "Cost: $" + (340 + 0.1 * (x - 2500));
    }

}

JavaScript conditional calculation mechanism

Answer №1

Similar questions

Implementing automatic pagination based on container height using jQuery

Instead of adding a new object to the array, consider increasing the quantity of an existing object

Reset the dropdown list back to its initial state

Locate a piece of text with jQuery and enclose it within a specified container

What steps can be taken to effectively build a test suite architecture using Jest?

Limiting Firebase communication to Electron Application

Interacting with an XML file contained within a PHP variable using jQuery

Obtain JSON data from an API and display it in a table using axios and Vue.js

The Firebase function that reloads the auth currentUser is not refreshing properly within a Vue component

JavaScript validation failing to validate number ranges for 4-digit numbers

The component is failing to store its value within the database

Filling a HTML div with data through PageMethods and AJAX

Ways to ensure that ng-click is triggered exclusively on the click event

What is the best way to capture a screenshot using selenium in conjunction with synchronous JavaScript?

Trying out the ClientPortal in Next.JS with Jest Testing

Fulfill the specified amounts for each row within a collection of items

Grouping results by month according to the datetime object in C#

Verifying whether an item shows potential for being a successful function

Can the concept of partial class be used in an AngularJS controller?

Is there a tool or software available that can securely encode a text file into an HTML file without the need for loading it using AJAX?