Ajuda em alterar html via javascript

Programação
#1

Bom dia amigos, esse código pega todas as variáveis e tudo mais, porém na hora de registrar no campo=‘tabelanomes’ ele aparece por um breve momento seus valores bem direitinho, e depois disso desaparece, o que poderia ser isso?

<body> 
    <form>
    Valor 1:<input id='campo1'/> 
    <input type='submit' id='submeter' onclick='fazerAlgo()' value='Envia esse inferno' />
    </form>
    <p id='tabelanomes'>O resultado aparece aqui!</p>

    </body>
    <script>

     
    function fazerAlgo(){
          var nomes = document.getElementById("campo1").value;
    	   nomes = nomes.split(",");
    	   for(i=0;i<nomes.length;i++){
    	   document.getElementById('tabelanomes').innerHTML = ("Nome "+(i+1)+": "+nomes[i]+"<br>");
    	   }
    	 }

    </script>
#2

Isso acontecia pq o form estava tendo o evento padrão dele, que é recarregar quando terminar.

Uma solução extremamente simples é vc usar o

event.preventDefault()

dentro da sua função. (Exemplo acima)

EDIT:

Vi tambem que vc tava querendo mostrar vários nomes como resultado, mas tava querendo colocar isso dentro de um P, toda vez que o for termina (pensando no seu codigo), ele vai sobrescrever o valor antigo…

Então vc tem que criar um elemento novo pra mostrar esse novo resultado:

p.innerHTML = "Nome " + (i + 1) + ": " + nomes[i] + "<br>";
div.append(p);

Isso ta no exemplo acima também! Bons estudos :grinning: