Problems with "NaN" data outputs in javaScript

Question

Problems with "NaN" data outputs in javaScript

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

Hi, I'm doing the typical calculator in javaScript but I have a NaN error in the output every time I run the "SUM" function and I think I'm converting the data well to numbers and I do not see the error. Please someone help me I would appreciate it.

<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(" ");
});

javascript

asked by user3821102 30.01.2018 в 22:13

source

2 answers

2

The variable variable assignment changes

num = "" a num = "0"

in the convert function. Here the code.

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>

Greetings.

answered by 30.01.2018 в 22:39

Why node.replaceChild does not work? Disable HTML button in JavaScript

score 1 · Accepted Answer

The problem is that the convertir function when receiving an empty array returns NaN instead of 0 . You can fix it by initializing variable num with "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>