# Mi calculadora.js -- javascript campo con calculator camp codereview Relacionados El problema

## My Calculator.js

3

### problema

Español

Implementación de JavaScript de una calculadora básica. Buscando críticas constructivas de mi código. ¡Gracias de antemano!

` ` /**  * The {@code DecimalNumber} class wraps a primitive data type {@code int}.  * The object of type {@code DecimalNumber} will be helpful when doing a  * conversion of a type {@code int} to {@code BinaryNumber}.  *  * @author Praveen Kumar  */ public class DecimalNumber {     // wrapped int     private final int value;      /**      * Constructs a newly allocated {@code DecimalNumber} object that represents      * the specified {@code int} value.      *      * @param integer The primitive {@code int} value represented by {@code this}      * object.      */     public DecimalNumber(int value) {         this.value = value;     }      /**      * Returns a {@code BinaryNumber}(base 2)      * representation of unsigned {@code int} equivalent to {@code int}      * represented by {@code this} object.      * The unsigned {@code int} equivalent is the {@code int} represented by      * this object plus 2<sup>32</sup> if the represented {@code int} is negative;      * otherwise it is equal to the represented {@code int} of {@code this} object.      * for clearity here is the example: let the represented {@code int = -8} than the      * equivalent unsigned {@code int} will be 2<sup>32</sup> {@code + (-8)}.      *      * <p>The {@code BinaryNumber} returned by this method will contains the leading      * {@code 0}s if the size of the binary string equivalent to the {@code int}      * represented by {@code this} object is less than 32.      * and in that case The number of leading {@code 0}s will be 32 minus the minimum number      * of bits required to convert {@code int} to a binary number.      *      * @return BinaryNumber the binary equivalent of the {@code int} represented by                {@code this} object.      */     public BinaryNumber toBinaryNumber() {         int i = Math.abs(value);         StringBuilder mutableBinString = new StringBuilder();         while (i != 0) {             mutableBinString.append(isEven(i) ? '0' : '1');             i >>>= 1;         }         mutableBinString.append('0');         mutableBinString.reverse();         BinaryNumber binaryNum;         if (value < 0) {             binaryNum = new BinaryNumber(mutableBinString.toString()).twosComplement();             return binaryNum.toSize(Integer.SIZE);         }         binaryNum = new BinaryNumber(mutableBinString.toString());         return binaryNum.toSize(Integer.SIZE);     }      /**      * Tests if the specified argument is a Even Number.      *      *@param i the {@code int} to be tested.      *@returns {@code true} if the arugument is a Even Number;{@code false} otherwise.      */     public static boolean isEven(int i) {         return (i & 1) == 0;     } } 0 ` `
Original en ingles

JavaScript implementation of a basic calculator. Looking for constructive criticism of my code. Thanks in advance!

``    window.onload = function() {      // number button variable declarations      var zeroButton = document.getElementById("zero");     var oneButton = document.getElementById("one");     var twoButton = document.getElementById("two");     var threeButton = document.getElementById("three");     var fourButton = document.getElementById("four");     var fiveButton = document.getElementById("five");     var sixButton = document.getElementById("six");     var sevenButton = document.getElementById("seven");     var eightButton = document.getElementById("eight");     var nineButton = document.getElementById("nine");      // operator button variable declarations      var plusButton = document.getElementById("plus");     var minusButton = document.getElementById("minus");     var timesButton = document.getElementById("times");     var dividedByButton = document.getElementById("divided_by");      // action button variable declarations      var clearButton = document.getElementById("clear");     var enterButton = document.getElementById("enter");      // display variable declarations      var operatorDisplay = document.getElementById("operator_display");     var resultDisplay = document.getElementById("result_display_value");      // variable holds hidden number      var hiddenNum = "";      // number button function      var numberFunction = function(numberButton) {         numberButton.onclick = function(event) {             resultDisplay.innerHTML += numberButton.innerHTML;         }     };      // number function calls      numberFunction(zeroButton);     numberFunction(oneButton);     numberFunction(twoButton);     numberFunction(threeButton);     numberFunction(fourButton);     numberFunction(fiveButton);     numberFunction(sixButton);     numberFunction(sevenButton);     numberFunction(eightButton);     numberFunction(nineButton);      // operations function      var operations = function() {         if (operatorDisplay.innerHTML === "+") {             resultDisplay.innerHTML = parseInt(hiddenNum) + parseInt(resultDisplay.innerHTML);         } else if (operatorDisplay.innerHTML === "-") {             resultDisplay.innerHTML = parseInt(hiddenNum) - parseInt(resultDisplay.innerHTML);         } else if (operatorDisplay.innerHTML === "*") {             resultDisplay.innerHTML = parseInt(hiddenNum) * parseInt(resultDisplay.innerHTML);         } else if (operatorDisplay.innerHTML === "/") {             resultDisplay.innerHTML = parseInt(hiddenNum) / parseInt(resultDisplay.innerHTML);         }     };      // operator button function      var operatorFunction = function(operatorButton) {         operatorButton.onclick = function(event) {             if (resultDisplay.innerHTML !== "" && hiddenNum !== undefined) {                 operations();             }             hiddenNum = resultDisplay.innerHTML;             resultDisplay.innerHTML = "";             operatorDisplay.innerHTML = operatorButton.innerHTML;         }     };      // operator function calls      operatorFunction(plusButton);     operatorFunction(minusButton);     operatorFunction(timesButton);     operatorFunction(dividedByButton);      // clear function      var clearFunction = function(button, display) {         display.innerHTML = "";     };      // clear button      clearButton.onclick = function(event) {         clearFunction(clearButton, operatorDisplay);         clearFunction(clearButton, resultDisplay);         hiddenNum = "";     }      // enter button      enterButton.onclick = function(event) {         if (resultDisplay.innerHTML === "" && hiddenNum === "") {             resultDisplay.innerHTML = "";         } else if (resultDisplay.innerHTML === "") {             if (operatorDisplay.innerHTML === "+") {                 resultDisplay.innerHTML = parseInt(hiddenNum) + parseInt(hiddenNum);             } else if (operatorDisplay.innerHTML === "-") {                 resultDisplay.innerHTML = parseInt(hiddenNum) - parseInt(hiddenNum);             } else if (operatorDisplay.innerHTML === "*") {                 resultDisplay.innerHTML = parseInt(hiddenNum) * parseInt(hiddenNum);             } else if (operatorDisplay.innerHTML === "/") {                 resultDisplay.innerHTML = parseInt(hiddenNum) / parseInt(hiddenNum);             }         } else {             operations();         }         clearFunction(enterButton, operatorDisplay);     }  } ``

## Lista de respuestas

1

La mejor respuesta

Creo que el uso de elementos DOM como un almacenamiento de datos es una mala elección de diseño. Use las variables JS para eso y el número de UGLY ` .innerHTML `

` Por ejemplo: `

` var operations = function() { if (operator === "+") { result = parseInt(hiddenNum) + parseInt(result); } else if (operator === "-") { result = parseInt(hiddenNum) - parseInt(result); } else if (operator === "*") { result = parseInt(hiddenNum) * parseInt(result); } else if (operator === "/") { result = parseInt(hiddenNum) / parseInt(result); } resultDisplay.innerHTML = result; }; `

Dónde ` result2 ` y ` operator ` son variables globales.

Segundo, puede almacenar botones numéricos en una matriz y nombrarlos como "Button0", "Button1" y así sucesivamente.

` ` var numButton = new Array(10) for (i=0; i<10; i++) {     numButton[i] = document.getElementById("button" + i);     numButton[i].onclick = function(event) {         // be careful with a scope of variable i here,         // I dont sure it is a right variant         result += i         resultDisplay.innerHTML = result ;     } }  ` `

I think that using DOM elements as a data storage is a bad design choise. Use JS variables for that and the number of ugly `.innerHTML`s in your code will decrease drammatically (in addition it is a long operation).

For example:

``var operations = function() {     if (operator === "+") {         result = parseInt(hiddenNum) + parseInt(result);     } else if (operator === "-") {         result = parseInt(hiddenNum) - parseInt(result);     } else if (operator === "*") {         result = parseInt(hiddenNum) * parseInt(result);     } else if (operator === "/") {         result = parseInt(hiddenNum) / parseInt(result);     }     resultDisplay.innerHTML = result; }; ``

where `result` and `operator` is global variables.

Second, you can store number buttons in an array and name them like "button0", "button1" and so on.

``var numButton = new Array(10) for (i=0; i<10; i++) {     numButton[i] = document.getElementById("button" + i);     numButton[i].onclick = function(event) {         // be careful with a scope of variable i here,         // I dont sure it is a right variant         result += i         resultDisplay.innerHTML = result ;     } } ``

6  Calculadoras para ecuaciones de la ley de gas  ( Calculators for gas law equations )
He realizado un programa C ++ que calcula una variable faltante en una ecuación para una de las cinco leyes siguientes de gas: la ley de Boyle ley de car...

2  Una calculadora básica en C que utiliza un bucle  ( A basic calculator in c that uses a loop )
He creado un programa que forma una calculadora básica en C que incluye las operaciones básicas como la adición, la resta, la multiplicación y la división. Pe...

0  Calculadora de java simple en columpio  ( Simple java calculator in swing )
¿Puedes revisar este código para mí? ¿Cómo lo hago mejor? //this is the calculator import java.awt.*; import java.awt.event.*; import javax.swing.*; import...

He escrito este código para una calculadora de dos entradas. ¿Hay algo que pueda hacer para que este código sea más eficiente? import javax.swing.*; impor...

10  Calculadora básica que lleva 2 números y hace una operación con ellos  ( Basic calculator that takes 2 numbers and does an operation with them )
El código funciona perfectamente bien para mí (lo compiló en Bluej y Eclipse), pero me preguntaba qué se consideraban otros programadores más experimentados. ...

3  Primer programa de Python: Calculadora básica  ( First python program basic calculator )
Quiero comenzar a aprender Python por diversión y, por lo tanto, podría profundizar en los proyectos de aprendizaje de la máquina más adelante en el futuro ta...

6  Calculadora aritmética básica  ( Basic arithmetic calculator )
La calculadora admite los operadores básicos (agregar, sustancia, dividir, multiplicar). en este momento, solo funciona con enteros positivos No valido...

4  Calculadora binaria de Python  ( Python binary calculator )
Mi tarea fue construir una calculadora en la adición binaria de soporte de Python, etc. Para comenzar Definir un par de excepciones personalizadas: paper...

6  Calculadora simple en C #  ( Simple calculator in c )
Es una calculadora básica donde el usuario ingresa a dos números, y una operación y el programa lo convierten en una ecuación y obtiene la respuesta. Por ejem...

5  Calculadora de área y volumen  ( Area and volume calculator )
Soy un codificador para principiantes, haciéndolo únicamente por diversión, habiendo comenzado a codificar hace unos dos meses con Python. Tengo un punto de t...