Why are null values inserted into the table?

Question

I am trying to insert name and age into the HTML table using a prompt. But it inserts null values in the result, Can you implement a solution for this? Thank you in advance!

var i = 0;
var n = new Array();
var a = new Array();
var name = " ",
  age = " ";

while (!(name == null || age == null)) {
  name = prompt("Enter name: ");
  age = prompt("Enter age: ");
  n[i] = name;
  a[i] = age;
  i++;
}

document.writeln("<table border='1' width='25%'>");
document.writeln("<caption>Arrays</caption>");
document.writeln("<th>Name</th><th>Age</th>");

for (var k in n) {
  if (!(k == null))
    document.writeln("<tr><td>" + n[k] + "</td><td>" + a[k] + "</td></tr>");
}
document.write("</table>");

<h2>JavaScript Arrays</h2>
<p>JavaScript array elements are accesses using numeric indexes (starting from 0).</p>
<p id="demo"></p>

Because you are literally adding them to your array at `n[i] = name;` and `a[i] = age;` without checking. — Sebastian Simon, Nov 11 '19 at 10:28
`document.write` and `document.writeln` are [not recommended](https://stackoverflow.com/q/802854/4642212) for DOM manipulations, as they are obsolete, slow and not suitable for any evolving application. Write `if (k != null)` instead of `if (!(k == null))`. Use `[]` instead of `new Array()` and [`.push`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) instead of index assignment. — Sebastian Simon, Nov 11 '19 at 10:30
Please try using the [debugging capabilities](https://developer.mozilla.org/en-US/docs/Mozilla/Debugging/Debugging_JavaScript) of your browser. [Rubber Duck Debug](https://rubberduckdebugging.com) your code. — Sebastian Simon, Nov 11 '19 at 10:34
I corrected my mistakes because of your help, Thank you so much! :-) — Pulsara Sandeepa, Nov 11 '19 at 11:09

score 2 · Answer 1 · answered Nov 11 '19 at 10:31

That's because you are checking the null values before the prompt. Use the condition after name or age is provided.

while(true){
   name=prompt("Enter name: ");
   age=prompt("Enter age: ");
   if(name==null || age==null) break;
   n[i]=name;
   a[i]=age;
   i++;
}

score 1 · Accepted Answer · answered Nov 11 '19 at 10:39

The prompt function returns null on Cancel/Esc.

This is explained in the MDN documentation of prompt. To avoid printing null in your html table, you need to print it only if it exists.

Here is your code with the right condition:

var i = 0;
var n = new Array();
var a = new Array();
var name = " ",
  age = " ";

while (!(name == null || age == null)) {
  name = prompt("Enter name: ");
  age = prompt("Enter age: ");
  n[i] = name;
  a[i] = age;
  i++;
}

document.writeln("<table border='1' width='25%'>");
document.writeln("<caption>Arrays</caption>");
document.writeln("<th>Name</th><th>Age</th>");

for (var k in n) {
  if(n[k] !== null && a[k] !== null)
    document.writeln("<tr><td>" + n[k] + "</td><td>" + a[k] + "</td></tr>");
}
document.write("</table>");

<h2>JavaScript Arrays</h2>
<p>JavaScript array elements are accesses using numeric indexes (starting from 0).</p>
<p id="demo"></p>

Why are null values inserted into the table?

2 Answers2