I can’t add value in Array

Question

I want to add the name typed at the prompt in an array and displays the names in a table but when adding it displays the null value in the table.

 var nomes=[];
var indice=[];
    var i=1;

    window.onload=function(){


            do{
         var nome=  prompt("Digite o nome");    
             cadastrarProduto(nome);


                 }while (nome != null );
        listarProdutos();
      console.log("nome"+nome);



    }



function cadastrarProduto(nome){

    nomes[i]=nome;


   indice[i]=i;



}



function listarProdutos(){
    var conteudo="<table border='2'>";
     conteudo+="<tr>";
     conteudo+="<th>";
    conteudo+="<div class='indice'><p>Indice</p></div>";
      conteudo+="</th>";
    conteudo+="<th>";
    conteudo+="<div class='nome'><p>Nome</p></div>";
      conteudo+="</th>";
     conteudo+="</tr>";
    //pos contator
    for(var pos=1;pos<indice.length;pos++){
        conteudo+="<tr>";

        conteudo+="<td>"+indice[pos]+"</td>";


        conteudo+="<td>"+nomes[pos]+"</td>";

        conteudo+="</tr>";
    }
    conteudo+="</table>";
    document.getElementById("txtrelatorio").innerHTML=conteudo;
}

Answer 1

There are some things you need to fix:

• The value of i in the cadastrarProduto which makes you always in position 1 with only one name.
• When cancels the prompt reads null which is also to be added to the array
• Being the i for the position in the array should start at 0.

You don’t even need an array to store the indices.

See how your code can get simpler:

//agora sem os indices
var nomes = []; 

window.onload = function() {

  do {
    var nome = prompt("Digite o nome");
    if (nome){ //so adiciona se não for null
      cadastrarProduto(nome);
    }
  } while (nome != null);
  
  listarProdutos();
  console.log("nome" + nome);
}

function cadastrarProduto(nome) {
  nomes.push(nome); //para adicionar ao array basta chamar a função push
}

function listarProdutos() {
  var conteudo = "<table border='2'>";
  conteudo += "<tr>";
  conteudo += "<th>";
  conteudo += "<div class='indice'><p>Indice</p></div>";
  conteudo += "</th>";
  conteudo += "<th>";
  conteudo += "<div class='nome'><p>Nome</p></div>";
  conteudo += "</th>";
  conteudo += "</tr>";
  
  for (var pos = 0 /*agora começa em 0*/; pos < nomes.length; pos++) {
    conteudo += "<tr>";
    conteudo += "<td>" + (pos+1) + "</td>"; //aqui escreve o índice correto
    conteudo += "<td>" + nomes[pos] + "</td>";
    conteudo += "</tr>";
  }

  conteudo += "</table>";
  document.getElementById("txtrelatorio").innerHTML = conteudo;
}

<div id="txtrelatorio"></div>

Answer 2

<script>
var nomes=[];
var i=1;

window.onload=function(){
    do{
        var nome=prompt("Digite o nome para o indice " + i + ":");
        if(nome){
            console.log("nome[" + i + "]: " + nome);
            cadastrarProduto(nome);
        }
    }while(nome!=="");

    listarProdutos();
}

function cadastrarProduto(nome){
    nomes[i]=nome;
    i++;
}

function listarProdutos(){
    var conteudo="<table border='2'>";
    conteudo+="<tr>";
    conteudo+="<th>";
    conteudo+="<div class='indice'><p>Indice</p></div>";
    conteudo+="</th>";
    conteudo+="<th>";
    conteudo+="<div class='nome'><p>Nome</p></div>";
    conteudo+="</th>";
    conteudo+="</tr>";

  //pos contator
    for(var pos=1;pos<nomes.length;pos++){
        conteudo+="<tr>";
        conteudo+="<td>"+pos+"</td>";
        conteudo+="<td>"+nomes[pos]+"</td>";
        conteudo+="</tr>";
    }
    conteudo+="</table>";
    document.getElementById("txtrelatorio").innerHTML=conteudo;
}
</script>

<div id="txtrelatorio"></div>