Perform arithmetic operations based on selected options

Question

I have 2 input fields val_1 and val_2 and select options. The application needs to compute the result of the inputs based on the selected option.

    function calOparan(b){
      var sel_opera = b.options[b.selectedIndex].value;
        if(sel_opera=="Addition"){
            var sel_opera = "+";
        }
        if(sel_opera=="Subtraction"){
            var sel_opera = "-";
        }
        if(sel_opera=="Mutiplication"){
            var sel_opera = "*";
        }
        if(sel_opera=="Division"){
            var sel_opera = "/";
        }
        //document.getElementById("total_val").innerHTML=sel_opera;
        return sel_opera;
    }

    function calculateNow(){
        var opr = calOparan();
        var val_1 = document.getElementById('val_1').value;
        var val_2 = document.getElementById("val_2").value = (val_1 - (val_1/100)*2).toFixed(2);
        var result = val_1 + opr + val_2;
        document.getElementById('total_val').inner.HTML= result;
    }

<!-- Calculator -->
<select name="mySelect" id="selectOperation" onChange="calOparan(this)">
  <option disabled selected>Select your Operation</option>
  <option value="Addition"> Addition </option>
  <option value="Subtraction"> Subtraction </option>
  <option value="Mutiplication"> Mutiplication </option>
  <option value="Division"> Division </option>
</select>

<input type="number" id="val_1" name="val_1" onKeyUp="calculateNow()">
<input type="text" id="val_2" name="val_2" onKeyUp="calculateNow()">
<p id="total_val"></p>

When onKeyUp I want the result to be displayed on the page.

Can you explain what val_2 is supposed to do? The value in it seems to be ignored for the calculation in your code. — Ben Stephens, Apr 25 '21 at 12:17

Mamun · Accepted Answer · 2021-04-25T11:59:17.440

You can use eval. Also, I will suggest you to avoid inline event handler and it is better to use input event.

You can try the following way:

function calOparan(b){
  var sel = document.getElementById('selectOperation');
  var sel_opera = sel.options[sel.selectedIndex].value;
    if(sel_opera=="Addition"){
        var sel_opera = "+";
    }
    if(sel_opera=="Subtraction"){
        var sel_opera = "-";
    }
    if(sel_opera=="Mutiplication"){
        var sel_opera = "*";
    }
    if(sel_opera=="Division"){
        var sel_opera = "/";
    }
    //document.getElementById("total_val").innerHTML=sel_opera;
   // return sel_opera;
   calculateNow(sel_opera);
}

function calculateNow(sel_opera){
    var opr = sel_opera;//calOparan(document.querySelector('#selectOperation'));
    var input1 = document.getElementById('val_1').value;
    var val_1 =  input1 ==  "" ? 0 : input1;
    var input2 = document.getElementById('val_2');
    var val_2 =  input2.value ==  "" ? 0 : input2.value;
    val_2 = document.getElementById("val_2").value = (val_1 - (val_1/100)*2).toFixed(2);
    var result = eval(val_1 + opr + val_2);
    document.getElementById('total_val').innerHTML= result;
}

document.getElementById('val_1').addEventListener('input', calOparan);
document.getElementById('val_2').addEventListener('input', calOparan);
document.getElementById('selectOperation').addEventListener('input',calOparan);

<!-- Calculator -->
<select name="mySelect" id="selectOperation">
  <option disabled selected>Select your Operation</option>
  <option value="Addition"> Addition </option>
  <option value="Subtraction"> Subtraction </option>
  <option value="Mutiplication"> Mutiplication </option>
  <option value="Division"> Division </option>
</select>

<input type="number" id="val_1" name="val_1">
<input type="text" id="val_2" name="val_2">
<p id="total_val"></p>

score 0 · Answer 2 · answered Apr 25 '21 at 11:45

This way it won't work. You cannot pass the operand as string. Do it this way:

// compute the result according to the chosen option and return it
function compute(option, val1, val2){
    if(option == "Addition"){
        return val1 + val2;
    }
    if(option == "Subtraction"){
        return val1 - val2;
    }
    if(option == "Mutiplication"){
        return val1 * val2;
    }
    if(option  == "Division"){
        return val1 / val2;
    }
}

function calculateNow(){
    var val_1 = document.getElementById('val_1').value;
    var val_2 = document.getElementById("val_2").value = (val_1 - (val_1/100)*2).toFixed(2);
    var option = b.options[b.selectedIndex].value;

    // have the result computed inside the function
    var result = compute(option, val_1, val_2);
    document.getElementById('total_val').inner.HTML= result;
}

As you can see, the code is more readable and concise now.

Perfect code Lynx242, and thanks for your support it works just perfectly fine. — cyberbest, Apr 25 '21 at 13:38

score 0 · Answer 3 · answered Apr 25 '21 at 12:56

Perhaps one option would be to assign functions to object keys matching the values in the select box and then passing the two arguments to the functions, something like:

const select_ele  = document.getElementById('selectOperation');
const val_1_ele   = document.getElementById('val_1');
const val_2_ele   = document.getElementById('val_2');
const total_ele   = document.getElementById('total_val');

const operation_fns = {
  Addition:       (a, b) => a + b,
  Subtraction:    (a, b) => a - b,
  Mutiplication:  (a, b) => a * b,
  Division:       (a, b) => a / b,
};

const update_total = () => {
  const operation = select_ele.options[select_ele.selectedIndex].value;
  const val_1 = val_1_ele.value;
  const val_2 = val_2_ele.value = (val_1 - (val_1/100)*2).toFixed(2);
  
  const result = operation_fns[operation]?.(+val_1, +val_2);
  
  total_ele.innerHTML = result;
};

const create_element = (tag, attrs) =>
  Object.assign(document.createElement(tag), attrs);

const setup = () => {
  Object.keys(operation_fns).forEach(
    (key) => select_ele.append(
      create_element('option', { value: key, innerHTML: key })
    )
  );

  [select_ele, val_1_ele, val_2_ele].forEach(
    (ele) => ele.addEventListener('input', update_total)
  );
};

setup();

<!-- Calculator -->
<select name="mySelect" id="selectOperation">
  <option disabled selected>Select your Operation</option>
</select>

<input type="number" id="val_1" name="val_1">
<input type="text" id="val_2" name="val_2">
<p id="total_val"></p>

If you need to do something more complex it might be worth looking at math.js.

This code is amazing too as it also solved the problem in a more dynamic way thanks for your contribution, and I wish to learn more from you. — cyberbest, Apr 25 '21 at 13:37

Perform arithmetic operations based on selected options

3 Answers3