Replace NaN with another character using JavaScript-CodePudding

Can you please tell me how to replace NaN with another character? There are variables that are assigned some numeric value. Further in the function, these variables get their values, which I then display in the html table. But sometimes some variable returns NaN.

To fix this, I separately created an array with variables that already have some values. Next, I started the loop. If the condition returns NaN, then it should be replaced with "-". But it doesn't work.

var a, b, c, d, x1, x2, x3, x4;
var elem = document.getElementById.bind(document);

function iFunc() {
  a = 1;
  b = 3;
  c = 2;
  d = NaN;

  x1 = elem('a1').innerHTML = a;
  x2 = elem('b1').innerHTML = b;
  x3 = elem('c1').innerHTML = c;
  x4 = elem('d1').innerHTML = d;

  var arrX = [x1, x2, x3, x4];

  for (var x of arrX) {
    if (x !== x) {
      x = "-"; // the character that was supposed to replace NaN
      console.log(x);
    }
  }
}

iFunc();

<table>
  <tr>
    <td><span id="a1"></span></td>
    <td><span id="b1"></span></td>
    <td><span id="c1"></span></td>
    <td><span id="d1"></span></td>
  </tr>
</table>

UPD: with .map()

var a, b, c, d, x1, x2, x3, x4;
var elem = document.getElementById.bind(document);

function iFunc() {
  a = 1;
  b = 3;
  c = 2;
  d = NaN;

  x1 = elem('a1').innerHTML = a;
  x2 = elem('b1').innerHTML = b;
  x3 = elem('c1').innerHTML = c;
  x4 = elem('d1').innerHTML = d;

  var arrX = [x1, x2, x3, x4].map(n => n != n ? "-" : n);

  console.log(arrX);
}

iFunc();

<table>
  <tr>
    <td><span id="a1"></span></td>
    <td><span id="b1"></span></td>
    <td><span id="c1"></span></td>
    <td><span id="d1"></span></td>
  </tr>
</table>

CodePudding user response：

You are changing the value returned by elem('d1').innerHTML which won't impact what's in the DOM. What you are trying to do in a simplified way:

var a, b, c, d, x1, x2, x3, x4;
var elem = document.getElementById.bind(document);

function iFunc() {
  a = 1;
  b = 3;
  c = 2;
  d = NaN;

  elem("a1").innerHTML = a!=a ? "-" : a;
  elem("b1").innerHTML = b!=b ? "-" : b;
  elem("c1").innerHTML = c!=c ? "-" : c;
  elem("d1").innerHTML = d!=d ? "-" : d;
}

iFunc();

<table>
  <tr>
    <td><span id="a1"></span></td>
    <td><span id="b1"></span></td>
    <td><span id="c1"></span></td>
    <td><span id="d1"></span></td>
  </tr>
</table>

To who are suggesting to use isNaN, it's not the best way for all use cases, according to MDN:

Alternatively, in the absence of Number.isNaN, the expression (x != x) is a more reliable way to test whether variable x is NaN or not, as the result is not subject to the false positives that make isNaN unreliable.

CodePudding user response：

You need to replace the value in the array. Currently you are only replacing the value in the variable X.

Here is a solution with a corrected for loop:

var a, b, c, d, x1, x2, x3, x4;
var elem = document.getElementById.bind(document);

function iFunc () {
  a = 1;
  b = 3;
  c = 2;
  d = NaN;
  
  var arrX = [x1, x2, x3, x4];
  
  for (var index = 0; index < arrX.length; index  ) {
    var x = arrX[index]; // first we extract the value from the array
    arrX[index] = isNaN( x ) ? "-" : x;//then we replace the value in the array
    console.log(arrX[index])
 }
  
  x1 = elem('a1').innerHTML = a;
  x2 = elem('b1').innerHTML = b;
  x3 = elem('c1').innerHTML = c;
  x4 = elem('d1').innerHTML = d;
}

iFunc ();

<table>
  <tr>
    <td><span id="a1"></span></td>
    <td><span id="b1"></span></td>
    <td><span id="c1"></span></td>
    <td><span id="d1"></span></td>
  </tr>
 </table>

CodePudding user response：

Update

a good approach would be to have all values in a array. then you can use a loop to replace the NaN values. Afterwards you can handle the new mapped array like you want.

const arr = [1, 3, 2, NaN].map(n => n != n ? "-" : n)
console.log(arr)

old answer You can check with isNaN() or n != n function and if is true the you can print "-". In your case i would wrap this check in a function. Like this:

function checkNumber(n) {
  return  n != n ? "-" : n;
}

var a, b, c, d, x1, x2, x3, x4;
var elem = document.getElementById.bind(document);

function iFunc () {
  a = 1;
  b = 3;
  c = 2;
  d = NaN;
  
  x1 = elem('a1').innerHTML = checkNumber(a);
  x2 = elem('b1').innerHTML = checkNumber(b);
  x3 = elem('c1').innerHTML = checkNumber(c);
  x4 = elem('d1').innerHTML = checkNumber(d);
  
  var arrX = [x1, x2, x3, x4];
  
  for (var x of arrX) {
    x = checkNumber(x);
    console.log(x);    
 }
}


iFunc ();

function checkNumber(n) {
  return n != n ? "-" : n;
}

<table>
  <tr>
    <td><span id="a1"></span></td>
    <td><span id="b1"></span></td>
    <td><span id="c1"></span></td>
    <td><span id="d1"></span></td>
  </tr>
 </table>

CodePudding user response：

We can simply use || symbol to handle NaN in Javascript.

var a, b, c, d, x1, x2, x3, x4;
var elem = document.getElementById.bind(document);

function iFunc() {
  a = 1;
  b = 3;
  c = 2;
  d = NaN;

  elem("a1").innerHTML = (a ||  "-"); //using || symbol to handle NaN
  elem("b1").innerHTML = (b ||  "-");
  elem("c1").innerHTML = (c ||  "-");
  elem("d1").innerHTML = (d ||  "-");
}

iFunc();

<table>
  <tr>
    <td><span id="a1"></span></td>
    <td><span id="b1"></span></td>
    <td><span id="c1"></span></td>
    <td><span id="d1"></span></td>
  </tr>
</table>