1

Hola estoy haciendo la típica calculadora en javaScript pero tengo un error de NaN en la salida cada vez que ejecuto la función "SUMA" y creo que estoy convirtiendo bien los datos a números y no veo el error. Por favor alguien me ayude les agradeceria.

<style>
button {
font-size: 200%;
width: 40px;
}

input {
font-size: 14px;
height: 40px;
text-align: right;
}

</style>
<script src="calc.js"></script>
<script src="jquery.js"></script>
</head>

<body>
<table>
<tbody>
    <tr>
        <td colspan="4"><input id="display" name="display" disabled=""></td>
    </tr>

<tr>
  <td><button id="button1" value="1">1</button></td>
  <td><button id="button2" value="2">2</button></td>
  <td><button id="button3" value="3">3</button></td>
  <td><button id="addButton">+</button></td>
</tr>
<tr>
  <td><button id="button4" value="4">4</button></td>
  <td><button id="button5" value="5">5</button></td>
  <td><button id="button6" value="6">6</button></td>
  <td><button id="subtractButton">-</button></td>
</tr>
<tr>
  <td><button id="button7" value="7">7</button></td>
  <td><button id="button8" value="8">8</button></td>
  <td><button id="button9" value="9">9</button></td>
  <td><button id="multiplyButton">*</button></td>
</tr>
<tr>
  <td><button id="clearButton">C</button></td>
  <td><button id="button0" value="0">0</button></td>
  <td><button id="equalsButton">=</button></td>
  <td><button id="divideButton">÷</button></td>
</tr>
</tbody>

var nunArray = []; //arreglo que almacena los resultados
var newArray = [];
var operation = false;
var suma = false;
var dividir = false;
var result = 0;
var convertir = function arrayANumber(array){
var num = "";
for(var i = 0; i < array.length; i++){
    num += array[i];
}
return (parseInt(num));
}

//Accion sumar
$('#addButton').click(function(){
    operation = true;   
    suma = true;
    if (nunArray.length) {
         result = convertir(nunArray) + convertir(newArray);
         //var total = result;

         newArray.length = 0;
         nunArray.length = 0;
         $('#display').val(result);

    }else{
        result += convertir(newArray);
        newArray.length = 0;
        $('#display').val(result);
    }/*else{
        $('#display').val(nunArray.join(""));//Muestro el valor del arreglo
    }*/
});

//Botoness
 $('#button1').click(function(){
  //probar la variable global newArray
    if (operation == true) {
         newArray.push($('#button1').val());
        var cadena = convertir(newArray);
        //$('#display').val(newArray.join(""));
        $('#display').val(cadena);
    }else{
        nunArray.push($('#button1').val());
        $('#display').val(nunArray.join(""));
    }
});
 $('#button2').click(function(){
    if (operation == true) {
        newArray.push($('#button2').val());
        $('#display').val(newArray.join(""));
    }else{
        nunArray.push($('#button2').val());
        $('#display').val(nunArray.join(""));
    }
});
 $('#button3').click(function(){    
    if (operation == true) {
        newArray.push($('#button3').val());
        $('#display').val(newArray.join(""));
    }else{
        nunArray.push($('#button3').val());
        $('#display').val(nunArray.join(""));
    }
});
 $('#button4').click(function(){    
    if (operation == true) {
        newArray.push($('#button4').val());
        $('#display').val(newArray.join(""));
    }else{
        nunArray.push($('#button4').val());
        $('#display').val(nunArray.join(""));
    }
});
 $('#button5').click(function(){    
    if (operation == true) {
        newArray.push($('#button5').val());
        $('#display').val(newArray.join(""));
    }else{
        nunArray.push($('#button5').val());
        $('#display').val(nunArray.join(""));
    }
});
 $('#button6').click(function(){    
    if (operation == true) {
        newArray.push($('#button6').val());
        $('#display').val(newArray.join(""));
    }else{
        nunArray.push($('#button6').val());
        $('#display').val(nunArray.join(""));
    }
});
 $('#button7').click(function(){    
    if (operation == true) {
        newArray.push($('#button7').val());
        $('#display').val(newArray.join(""));
    }else{
        nunArray.push($('#button7').val());
        $('#display').val(nunArray.join(""));
    }
});
 $('#button8').click(function(){    
    if (operation == true) {
        newArray.push($('#button8').val());
        $('#display').val(newArray.join(""));
    }else{
        nunArray.push($('#button8').val());
        $('#display').val(nunArray.join(""));
    }
});
 $('#button9').click(function(){    
    if (operation == true) {
        newArray.push($('#button9').val());
        $('#display').val(newArray.join(""));
    }else{
        nunArray.push($('#button9').val());
        $('#display').val(nunArray.join(""));
    }
});
  $('#button0').click(function(){   
    if (operation == true) {
        newArray.push($('#button0').val());
        $('#display').val(newArray.join(""));
    }else{
        nunArray.push($('#button0').val());
        $('#display').val(nunArray.join(""));
    }
});
$('#clearButton').click(function(){ 
    nunArray.length = 0;
    newArray.length = 0;
    operation = false;
    suma = false;
    $('#display').val(" ");
});     

2 respuestas 2

2

Cambia la variable la asignación de la variable

num = "" a num = "0" 

en la función convertir. Aquí el código.

var nunArray = []; //arreglo que almacena los resultados
var newArray = [];
var operation = false;
var suma = false;
var dividir = false;
var result = 0;
var convertir = function arrayANumber(array){
var num = "0";
for(var i = 0; i < array.length; i++){
    num += array[i];
}
return (parseInt(num));
}

//Accion sumar
$('#addButton').click(function(){
    debugger;
    operation = true;   
    suma = true;
    if (nunArray.length) {
         result = convertir(nunArray) + convertir(newArray);
         //var total = result;

         newArray.length = 0;
         nunArray.length = 0;
         $('#display').val(result);

    }else{
        result += convertir(newArray);
        newArray.length = 0;
        $('#display').val(result);
    }/*else{
        $('#display').val(nunArray.join(""));//Muestro el valor del arreglo
    }*/
});

//Botoness
 $('#button1').click(function(){
  //probar la variable global newArray
    if (operation == true) {
         newArray.push($('#button1').val());
        var cadena = convertir(newArray);
        //$('#display').val(newArray.join(""));
        $('#display').val(cadena);
    }else{
        nunArray.push($('#button1').val());
        $('#display').val(nunArray.join(""));
    }
});
 $('#button2').click(function(){
    if (operation == true) {
        newArray.push($('#button2').val());
        $('#display').val(newArray.join(""));
    }else{
        nunArray.push($('#button2').val());
        $('#display').val(nunArray.join(""));
    }
});
 $('#button3').click(function(){    
    if (operation == true) {
        newArray.push($('#button3').val());
        $('#display').val(newArray.join(""));
    }else{
        nunArray.push($('#button3').val());
        $('#display').val(nunArray.join(""));
    }
});
 $('#button4').click(function(){    
    if (operation == true) {
        newArray.push($('#button4').val());
        $('#display').val(newArray.join(""));
    }else{
        nunArray.push($('#button4').val());
        $('#display').val(nunArray.join(""));
    }
});
 $('#button5').click(function(){    
    if (operation == true) {
        newArray.push($('#button5').val());
        $('#display').val(newArray.join(""));
    }else{
        nunArray.push($('#button5').val());
        $('#display').val(nunArray.join(""));
    }
});
 $('#button6').click(function(){    
    if (operation == true) {
        newArray.push($('#button6').val());
        $('#display').val(newArray.join(""));
    }else{
        nunArray.push($('#button6').val());
        $('#display').val(nunArray.join(""));
    }
});
 $('#button7').click(function(){    
    if (operation == true) {
        newArray.push($('#button7').val());
        $('#display').val(newArray.join(""));
    }else{
        nunArray.push($('#button7').val());
        $('#display').val(nunArray.join(""));
    }
});
 $('#button8').click(function(){    
    if (operation == true) {
        newArray.push($('#button8').val());
        $('#display').val(newArray.join(""));
    }else{
        nunArray.push($('#button8').val());
        $('#display').val(nunArray.join(""));
    }
});
 $('#button9').click(function(){    
    if (operation == true) {
        newArray.push($('#button9').val());
        $('#display').val(newArray.join(""));
    }else{
        nunArray.push($('#button9').val());
        $('#display').val(nunArray.join(""));
    }
});
  $('#button0').click(function(){   
    if (operation == true) {
        newArray.push($('#button0').val());
        $('#display').val(newArray.join(""));
    }else{
        nunArray.push($('#button0').val());
        $('#display').val(nunArray.join(""));
    }
});
$('#clearButton').click(function(){ 
    nunArray.length = 0;
    newArray.length = 0;
    operation = false;
    suma = false;
    $('#display').val(" ");
});
button {
font-size: 200%;
width: 40px;
}

input {
font-size: 14px;
height: 40px;
text-align: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<table>
<tbody>
    <tr>
        <td colspan="4"><input id="display" name="display" disabled=""></td>
    </tr>

<tr>
  <td><button id="button1" value="1">1</button></td>
  <td><button id="button2" value="2">2</button></td>
  <td><button id="button3" value="3">3</button></td>
  <td><button id="addButton">+</button></td>
</tr>
<tr>
  <td><button id="button4" value="4">4</button></td>
  <td><button id="button5" value="5">5</button></td>
  <td><button id="button6" value="6">6</button></td>
  <td><button id="subtractButton">-</button></td>
</tr>
<tr>
  <td><button id="button7" value="7">7</button></td>
  <td><button id="button8" value="8">8</button></td>
  <td><button id="button9" value="9">9</button></td>
  <td><button id="multiplyButton">*</button></td>
</tr>
<tr>
  <td><button id="clearButton">C</button></td>
  <td><button id="button0" value="0">0</button></td>
  <td><button id="equalsButton">=</button></td>
  <td><button id="divideButton">÷</button></td>
</tr>
</tbody>

Saludos.

1
  • Muchas gracias resolvi con el comentario de los dos. Saludos Commented el 30 ene. 2018 a las 21:55
1

El problema es que la función convertir cuando recibe un array vacío devuelve NaN en lugar de 0. Puedes solucionarlo inicializando la variable num con un "0":

var nunArray = []; //arreglo que almacena los resultados
var newArray = [];
var operation = false;
var suma = false;
var dividir = false;
var result = 0;
var convertir = function arrayANumber(array){
var num = "0";
for(var i = 0; i < array.length; i++){
    num += array[i];
}
return (parseInt(num));
}

//Accion sumar
$('#addButton').click(function(){
    operation = true;   
    suma = true;
    if (nunArray.length) {
         result = convertir(nunArray) + convertir(newArray);
         //var total = result;

         newArray.length = 0;
         nunArray.length = 0;
         $('#display').val(result);

    }else{
        result += convertir(newArray);
        newArray.length = 0;
        $('#display').val(result);
    }/*else{
        $('#display').val(nunArray.join(""));//Muestro el valor del arreglo
    }*/
});

//Botoness
 $('#button1').click(function(){
  //probar la variable global newArray
    if (operation == true) {
         newArray.push($('#button1').val());
        var cadena = convertir(newArray);
        //$('#display').val(newArray.join(""));
        $('#display').val(cadena);
    }else{
        nunArray.push($('#button1').val());
        $('#display').val(nunArray.join(""));
    }
});
 $('#button2').click(function(){
    if (operation == true) {
        newArray.push($('#button2').val());
        $('#display').val(newArray.join(""));
    }else{
        nunArray.push($('#button2').val());
        $('#display').val(nunArray.join(""));
    }
});
 $('#button3').click(function(){    
    if (operation == true) {
        newArray.push($('#button3').val());
        $('#display').val(newArray.join(""));
    }else{
        nunArray.push($('#button3').val());
        $('#display').val(nunArray.join(""));
    }
});
 $('#button4').click(function(){    
    if (operation == true) {
        newArray.push($('#button4').val());
        $('#display').val(newArray.join(""));
    }else{
        nunArray.push($('#button4').val());
        $('#display').val(nunArray.join(""));
    }
});
 $('#button5').click(function(){    
    if (operation == true) {
        newArray.push($('#button5').val());
        $('#display').val(newArray.join(""));
    }else{
        nunArray.push($('#button5').val());
        $('#display').val(nunArray.join(""));
    }
});
 $('#button6').click(function(){    
    if (operation == true) {
        newArray.push($('#button6').val());
        $('#display').val(newArray.join(""));
    }else{
        nunArray.push($('#button6').val());
        $('#display').val(nunArray.join(""));
    }
});
 $('#button7').click(function(){    
    if (operation == true) {
        newArray.push($('#button7').val());
        $('#display').val(newArray.join(""));
    }else{
        nunArray.push($('#button7').val());
        $('#display').val(nunArray.join(""));
    }
});
 $('#button8').click(function(){    
    if (operation == true) {
        newArray.push($('#button8').val());
        $('#display').val(newArray.join(""));
    }else{
        nunArray.push($('#button8').val());
        $('#display').val(nunArray.join(""));
    }
});
 $('#button9').click(function(){    
    if (operation == true) {
        newArray.push($('#button9').val());
        $('#display').val(newArray.join(""));
    }else{
        nunArray.push($('#button9').val());
        $('#display').val(nunArray.join(""));
    }
});
  $('#button0').click(function(){   
    if (operation == true) {
        newArray.push($('#button0').val());
        $('#display').val(newArray.join(""));
    }else{
        nunArray.push($('#button0').val());
        $('#display').val(nunArray.join(""));
    }
});
$('#clearButton').click(function(){ 
    nunArray.length = 0;
    newArray.length = 0;
    operation = false;
    suma = false;
    $('#display').val(" ");
});  
button {
font-size: 200%;
width: 40px;
}

input {
font-size: 14px;
height: 40px;
text-align: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
    <tr>
        <td colspan="4"><input id="display" name="display" disabled=""></td>
    </tr>

<tr>
  <td><button id="button1" value="1">1</button></td>
  <td><button id="button2" value="2">2</button></td>
  <td><button id="button3" value="3">3</button></td>
  <td><button id="addButton">+</button></td>
</tr>
<tr>
  <td><button id="button4" value="4">4</button></td>
  <td><button id="button5" value="5">5</button></td>
  <td><button id="button6" value="6">6</button></td>
  <td><button id="subtractButton">-</button></td>
</tr>
<tr>
  <td><button id="button7" value="7">7</button></td>
  <td><button id="button8" value="8">8</button></td>
  <td><button id="button9" value="9">9</button></td>
  <td><button id="multiplyButton">*</button></td>
</tr>
<tr>
  <td><button id="clearButton">C</button></td>
  <td><button id="button0" value="0">0</button></td>
  <td><button id="equalsButton">=</button></td>
  <td><button id="divideButton">÷</button></td>
</tr>
</tbody>
</table>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.