-5
\$\begingroup\$

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.

\$\endgroup\$
2
  • \$\begingroup\$ how does it work to access the DOM elements directly by there ids. Is this a special feature of Stackoverflow Code Snippets? \$\endgroup\$
    – lex82
    Dec 6, 2020 at 11:31
  • 1
    \$\begingroup\$ See stackoverflow.com/questions/3434278/…. (it works, but it's bad practice) \$\endgroup\$ Dec 6, 2020 at 14:12

2 Answers 2

1
\$\begingroup\$

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>

\$\endgroup\$
0
\$\begingroup\$

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);
\$\endgroup\$
4
  • \$\begingroup\$ I don't want to change my code. \$\endgroup\$
    – Arian
    Dec 6, 2020 at 12:56
  • 1
    \$\begingroup\$ @Arian What do you mean you don't want to change your code? \$\endgroup\$
    – user228914
    Dec 6, 2020 at 13:22
  • 2
    \$\begingroup\$ Oops, pinged wrong person, you both start with A. @Arian The whole point of Code Review is to improve one's code, which can only be done by changing it \$\endgroup\$ Dec 6, 2020 at 16:52
  • \$\begingroup\$ @CertainPerformance I just want to change names. \$\endgroup\$
    – Arian
    Dec 6, 2020 at 17:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.