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>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 variablexisNaNor not, as the result is not subject to the false positives that makeisNaNunreliable.
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>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>