A calculator in JavaScript

Question

I made a calculator in JavaScript. Now, I want to rename my functions, variables, and input names. But I don't know how.

Here is my codes:

function Calc() {
    var num1 = +txt1.value;
    var num2 = +txt2.value;
    var ch = +optxt.value;
    var result;
    if (ch == 1) {
        result = num1 + num2;
    }
    if (ch == 2) {
        result = num1 - num2;
    }
    if (ch == 3) {
        result = num1 * num2;
    }
    if (ch == 4) {
        result = num1 / num2;
    }
    if (ch == 5) {
        result = Math.pow(num1, num2);
    }
    if (ch == 6) {
        result = Math.pow(num1, 1 / num2);
    }
    p.innerHTML = result;
}

<script src="calculator-1.js"></script>
<input type="text" id="txt1" />
<br>
<input type="text" id="optxt" />
<br>
<input type="text" id="txt2" />
<br>
<button onclick="Calc()">Calculate</button>
<p id="p"></p>

Note: I just want to change names.

Answer 1

If you only want to change the names of functions, variables, and input names without changing any other pieces of code, here are my suggestions.

• The Calc function could just be Calculate
• The txt1 input could be operand1
• The txt2 input could be operand2
• The optxt input could be operator
• The ch variable could be operation
• The p element could be output (either id="output" or change it to <output></output>)

But these are all just suggestions; it's completely up to you if you want these changes.

function Calculate() {
  var num1 = +operand1.value;
  var num2 = +operand2.value;
  var operation = +operator.value;
  var result;
  if (operation == 1) {
    result = num1 + num2;
  }
  if (operation == 2) {
    result = num1 - num2;
  }
  if (operation == 3) {
    result = num1 * num2;
  }
  if (operation == 4) {
    result = num1 / num2;
  }
  if (operation == 5) {
    result = Math.pow(num1, num2);
  }
  if (operation == 6) {
    result = Math.pow(num1, 1 / num2);
  }
  output.innerHTML = result;
}

<script src="calculator-1.js"></script>
<input type="text" id="operand1" />
<br>
<input type="text" id="operator" />
<br>
<input type="text" id="operand2" />
<br>
<button onclick="Calculate()">Calculate</button>
<p id="output"></p>

Answer 2

You could name your input elements properly: operand1 instead of txt1 or at least txtOperand1 if you like to prefix elements with their type.

If you really want to use numbers for the operators, at least use named constants: const OP_ADD = 1;, const OP_SUBTRACT = 2; and so on...

If you want to take advantage of the fact that Javascripts is a function language you could first map your input value for the operator to an operation function and the apply the input values to the function:

function getOperation(code) {
    switch (code) {
        case OP_ADD: 
            return (a, b) => a + b;
        case OP_SUBTRACT:
            return (a, b) => a - b;
        // ...
    }
}

Finally you can then apply the operation like this:

let operation = getOperation(optxt.value); 
let result = operation(txtOperand1.value, txtOperand2.value);