Is there a way to lower the cost with the same value that was used to raise it?

Question

Is there a way to lower the cost with the same value that was used to raise it?

My goal is to adjust the price when the user clicks on the minus icon. However, I want the new price after decreasing to revert back to the initial price.

quantityHandler: function (action, product) {
      // Increase or decrease quantity of product
      try {
        const newItems = [...this.products]; // clone the array
        let idx = newItems.indexOf(product);
        let currentQty = newItems[idx].productQuantity;
        let price = newItems[idx].unitPrice;

        if (action == "more") {
          newItems[idx].productQuantity = currentQty + 1;
          newItems[idx].unitPrice = price + price;
        } else if (action == "less") {
          newItems[idx].productQuantity = currentQty > 1 ? currentQty - 1 : 1;
          // Decrease the current price using the original price
        }

        this.products = newItems; // set new state
        console.log(this.products);
      } catch (error) {
        alert(error);
      }
    },

javascript react-native vue-native

Answer 1

Answer №1

updateQuantity: function (action, item) {
      // Adjust the quantity of a specific item
      try {
        const updatedItems = [...this.items]; // create a copy of the array
        let index = updatedItems.findIndex((element) => { // find item by unique identifier
         return element.id === item.id
        })
        let currentQty = updatedItems[index].quantity;
        let price = updatedItems[index].price;
        let perItemPrice = price / currentQty;  // calculate per item price
        if (action == "increase") {
          updatedItems[index].price += perItemPrice;
          updatedItems[index].quantity = currentQty + 1;
        } else if (action == "decrease") {
          if(currentQty > 1) {
           updatedItems[index].price -= perItemPrice;
           updatedItems[index].quantity = currentQty > 1 ? currentQty - 1 : 1;
          }
        }

        this.items = updatedItems; // update state with new values
        console.log(this.items);
      } catch (error) {
        alert(error);
      }
    },

Calculate the price per item and adjust accordingly when increasing or decreasing quantity

Answer 2

updateQuantity: function (action, item) {
      // Adjust the quantity of a specific item
      try {
        const updatedItems = [...this.items]; // create a copy of the array
        let index = updatedItems.findIndex((element) => { // find item by unique identifier
         return element.id === item.id
        })
        let currentQty = updatedItems[index].quantity;
        let price = updatedItems[index].price;
        let perItemPrice = price / currentQty;  // calculate per item price
        if (action == "increase") {
          updatedItems[index].price += perItemPrice;
          updatedItems[index].quantity = currentQty + 1;
        } else if (action == "decrease") {
          if(currentQty > 1) {
           updatedItems[index].price -= perItemPrice;
           updatedItems[index].quantity = currentQty > 1 ? currentQty - 1 : 1;
          }
        }

        this.items = updatedItems; // update state with new values
        console.log(this.items);
      } catch (error) {
        alert(error);
      }
    },

Calculate the price per item and adjust accordingly when increasing or decreasing quantity

Answer 3

Answer №2

Incorporating negative numbers into your calculations is possible. Here's an example:

newTotal = currentQuantity * itemPrice
if (action === 'less') {
    newTotal *= -1;
}
// By adding a negative number, the total will decrease

Answer 4

Incorporating negative numbers into your calculations is possible. Here's an example:

newTotal = currentQuantity * itemPrice
if (action === 'less') {
    newTotal *= -1;
}
// By adding a negative number, the total will decrease

Is there a way to lower the cost with the same value that was used to raise it?

Answer №1

Answer №2

Similar questions

Navigating through object arrays using a loop

What is the best way to adjust the scroll speed within a specific element using React?

When the button is clicked, send data using 'POST' method to the php file and fetch

Avoid the sudden change in page content when using Router.Navigate

Creating a table in React.js by mapping array data from console.log output

Is it possible to send properties to a React Component using a regular function?

Creating Vue Components indirectly through programming

Form-linked Progress Bar

Ways to verify AJAX Response String when data format is specified as JSON

What are some effective ways to optimize a chat application and reduce the strain on the server?

Creating dynamic animations by shifting the hue of an image on a canvas

Creating a JavaScript function triggered by a click event that will redirect to

Utilizing external imports in webpack (dynamic importing at runtime)

Dynamically add onClick events using JavaScript to perform multiple identical actions

Having trouble getting the onClick event to trigger in React?

Having trouble connecting the controller variable in AngularJS to the HTML page

Bootstrap not being recognized in AngularJS HTML

The mobile button bar on iPhone is shown when scrolling or jumping up to the anchor, but it doesn't actually scroll or jump to the

Internet Explorer 11 and the process of URL encoding

The Problem with TypeScript Union Types