CODEWITHSUNDEEP
javascript
Kerbol
Kerbol

Reputation: 706

Javascript 'Calculate' Function - if/else

I am writing a function to calculate the sum based on the values chosen in selection boxes. How can I make the below JavaScript code more succinct? 

<select name="test" id="mySelect1" style="font-size:10px" onchange="Calculate()"> 
  <option value="onePoint">1</option>
  <option value="halfPoint">1/2</option>
</select>

<select name="test" id="mySelect2" style="font-size:10px" onchange="Calculate()"> 
  <option value="onePoint">1</option>
  <option value="halfPoint">1/2</option>
</select>


function Calculate()
{
  var selectedValue1 = document.getElementById("mySelect1").value;
  var selectedValue2 = document.getElementById("mySelect2").value;
    if (selectedValue1 == "onePoint" && selectedValue2 == "onePoint")
      {
        var total = 2;
      }
    else if (selectedValue1 == "halfPoint" && selectedValue2 == "halfPoint")
      {
        var total = 1;
      }
    else if (selectedValue1 == "onePoint" && selectedValue2 == "halfPoint")
      {
        var total = 1.5;
      }
    else if (selectedValue1 == "halfPoint" && selectedValue2 == "onePoint")
      {
        var total = 1.5;
      }
  document.getElementById("demo").innerHTML = total;
}

Upvotes: 0

Views: 92

Answers (2)

JanS
JanS

Reputation: 2075

Assuming there are just a few distinct values:

var values = {
    onePoint: 1,
    halfPoint: 0.5
}

function Calculate() {
    var value1 = values[document.getElementById("mySelect1").value];
    var value2 = values[document.getElementById("mySelect2").value];
    document.getElementById("demo").innerHTML = value1 + value2;
}

Upvotes: 2

Jonas Wilms
Jonas Wilms

Reputation: 138427

 const selectedValue1 = document.getElementById("mySelect1").value === "onePoint" ? 1 : 0.5;
 const selectedValue2 = document.getElementById("mySelect2").value === "onePoint" ? 1 : 0.5;

 const total = selectedValue1 + selectedValue2;

You may turn the values into numbers by using a ternary (?), then you can simply add them.

Upvotes: 2

Related Questions