if else statement within a function is breaking function in javascript

Question

I am 90% finished with a simple calculator that tells you the cost difference between shopping in person vs shopping online. You can view it below. My only problem is the last sentence. It says

You should shop in person. You’ll save €x everytime you shop.

X updates fine, just try it out and see. My problem is I want to display a string. The value of the string will be determined by an if/else statement.

If (cost of shopping in person < cost of shopping online) {display the above statement with x = difference in cost} Else {You should shop online. You'll save €x everytime you shop.}

I have included below my code, with my attempted if/else statement commented out because it breaks the code. I have tried just about everything and I'm at a roadblock. Any help would be greatly appreciated.

EDIT: I see my problem. This is probably a rookie error. Thanks guys. To fix my code I simply removed the comments I previously added and replaced my var summaryFull with the below line:

      var summaryFull = (summary>0) ? "You should shop online. You will save" + summary + "everytime you shop." : "You should shop in person. You will save" + (summary * -1) + "everytime you shop.";

    var incomePerHour = document.getElementById("income_p_hour");
    var timeToShop = document.getElementById("time_to_shop");
    var deliveryCharge = document.getElementById("delivery_charge");
    var timeToDeliver = document.getElementById("time_to_deliver");

    var inPersonElement = document.getElementById("inPersonCost");
    var deliveryElement = document.getElementById("deliveryCost");
    var summaryElement = document.getElementById("summary");
  //  var summaryFullElement = document.getElementById("summaryFull")

    var inPersonTextElement = document.getElementById("inPersonCostText");
    var deliveryTextElement = document.getElementById("deliveryCostText");
    var summaryTextElement = document.getElementById("summaryText");
    //var summaryFullTextElement = document.getElementById("summaryFullText");



    function updateProfit() {
      var inPersonCost = ((Number(incomePerHour.value)/60) * Number(timeToShop.value)).toFixed(2);
      var deliveryCost = (((Number(incomePerHour.value)/60) * Number(timeToDeliver.value)) + Number(deliveryCharge.value)).toFixed(2);
      var summary = (inPersonCost - deliveryCost).toFixed(2);
    /*  var summaryFull = (if ((parseInt(summary)) > 0){
        "You should shop online. You will save" + summary + "everytime you shop.";
      } else {
        "You should shop in person. You will save" + (summary * -1) + "everytime you shop.";
      })*/
      inPersonElement.value = inPersonCost;
      deliveryElement.value = deliveryCost;
      summaryElement.value = summary;
      //summaryFullElement.value = summaryFull;

      inPersonTextElement.innerText = inPersonCost;
      deliveryTextElement.innerText = deliveryCost;
      summaryTextElement.innerText = summary;
    //  summaryFullTextElement.innerText = summaryFull;

    }

    incomePerHour.onchange = timeToShop.onchange = deliveryCharge.onchange = timeToDeliver.onchange = updateProfit;

    <form method="POST">
      How much do you value your time per hour? <input type="int" id="income_p_hour"> <br />
      How much of your time does it take to go grocery shopping in person in minutes? <input type="int" id="time_to_shop"> <br />
      How much is the delivery charge? <input type="int" id="delivery_charge"> <br />
      How much of your time does it take to order your groceries online in minutes? <input type="int" id="time_to_deliver"> <br />

  <!--  <input type="hidden" id="profit" name="profit"/>
   Profit: $<span id="profitText"></span> -->
<br>
    <input type="hidden" id="inPersonCost" name="inPersonCost"/>
    Cost of shopping in person: <span id="inPersonCostText"></span> <br />
    <input type="hidden" id="deliveryCost" name="deliveryCost"/>
    Cost of shopping online: <span id="deliveryCostText"></span>
<br>
You should shop in person. You'll save €<input type="hidden" id="summary" name="summary"/><span id="summaryText"></span> everytime you shop.
<br>
<!-- <input type="hidden" id="summaryFull" name="summaryFull"/><span id="summaryFullText"></span> -->
    </form>

Yes, you can't assign a statement to a variable, use conditional operator instead. — Teemu
– Teemu, Commented Jan 19, 2022 at 19:58

David · Accepted Answer · 2022-01-19 19:59:48Z

2

An if block doesn't return anything. It's a statement, not an expression. So this structure is incorrect:

var x = if (something) { 1 } else { 2 }

You can use a ternary conditional operator, which is an expression, to evaluate to a value:

var x = something ? 1 : 2;

Or set the value within the if block:

var x = 0;
if (something) {
  x = 1;
} else {
  x = 2;
}

But you can't mix the two approaches like that.

answered Jan 19, 2022 at 19:59

David

221k42 gold badges247 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

if else statement within a function is breaking function in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related