Basic Calculations

Perform basic number calculations on select box event

by Amy Ruddy

HTML

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<div class="container py-3">
  <p class="lead">Basic Calculations</p>
  <div class="input-group mb-3">
    <input type="number" class="form-control" placeholder="Number 1" aria-label="Number 1" id="num1" value="0" onchange="ArrayNum[0] = parseInt(this.value);" onfocus="this.value = ''">
    <input type="number" class="form-control" placeholder="Number 2" aria-label="Number 2" id="num2" value="0" onchange="ArrayNum[1] = parseInt(this.value);" onfocus="this.value = ''">
    <span class="input-group-text">
      <select class="form-select" onchange="Calculate()" id="select_calculate">
        <option selected>Action</option>
        <option value="add">Add</option>
        <option value="subtract">Subtract</option>
        <option value="multiply">Multiply</option>
        <option value="divide">Divide</option>
        <option value="remainder">Remainder</option>
        <option value="exponent">Exponent</option>
      </select>
    </span>
  </div>
  <div class="lead" id="result">Result: <span id="result_span"></span></div>
</div>

JavaScript

let ArrayNum = [0, 0];
 const result = document.getElementById('result_span');
 
 function Calculate() {
   var selected = document.getElementById("select_calculate");
   var selectedValue = selected.options[selected.selectedIndex].value;
   switch (selectedValue) {
     case 'add':
       result.innerText = ArrayNum[0] + ArrayNum[1];
       break;
     case 'subtract':
       result.innerText = ArrayNum[0] - ArrayNum[1];
       break;
     case 'multiply':
       result.innerText = ArrayNum[0] * ArrayNum[1];
       break;
     case 'divide':
       result.innerText = ArrayNum[0] / ArrayNum[1];
       break;
     case 'remainder':
       result.innerText = `${Math.floor(ArrayNum[0] / ArrayNum[1])} remainder: ${ArrayNum[0] % ArrayNum[1]}`;
       break;
     case 'exponent':
       result.innerText = Math.pow(ArrayNum[0], ArrayNum[1]);
       break;
     default:
       result.innerText = '0';
   }

 }