1

estou tendo problemas em exibir os dados de um array usando a estrutura for. Eu criei um botão que acessa uma função que cria um loop for, e esse loop seria responsável por percorrer um array e exibir todos os dados na tela de forma listada (no caso, uma lista com todos os estados do Brasil), porém, ao "imprimir" os dados do array na tela, só é exibido o ultimo.

var estados = ["AC","AL","AP","AM","BA","CE","DF","ES","GO","MA","MT","MS","MG","PA","PB","PR","PE","PI","RR","RO","RJ","RN","RS","SC","SP","SE","TO"];
        function divTeste() {
            var div = document.getElementById('teste');
            for(var i = 0; i < estados.length; i++){
                div.innerHTML = `${estados[i]} <br>`
            }

        }
        
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html, charset=UTF-8">
    <title> Teste de Array </title>
</head>
<body>
        <div id="teste"></div> <p>
        <button onclick="divTeste()" class="buttonBasic"> Enviar formulário </button>
</body>
</html>

0

2 Respostas 2

4

No caso, para aparecer todos os dados da lista, você deve:

function divTeste() {
   var div = document.getElementById('teste');
   for(var i = 0; i < estados.length; i++){
      div.innerHTML = div.innerHTML + `${estados[i]} <br>`
   }
}

Uma outra forma de fazer isso é colocando um sinal de adição antes do igual:

function divTeste() {
   var div = document.getElementById('teste');
   for(var i = 0; i < estados.length; i++){
      div.innerHTML += `${estados[i]} <br>` //É a mesma coisa do anterior, só que simplificado.
   }
}

Como, a cada laço, você estava substituindo o valor da div.

1
  • Funcionou uhuu, brigado S2
    – D3fault
    30/11/2021 às 9:27
1

O problema no seu código está na linha...

div.innerHTML = `${estados[i]} <br>`

A cada iteração do laço for você sobrescreve o valor de div.innerHTML.

Como já dito uma solução é fazer a concatenação dentro do laço de iteração:

div.innerHTML += `${estados[i]} <br>`

Ou outra solução é descartar o laço de iteração e usar apenas o método Array.prototype.join() para juntar todos os elementos do array estados em uma string especificando a string <br> como separador.

const estados = ["AC", "AL", "AP", "AM", "BA", "CE", "DF", "ES", "GO", "MA", "MT", "MS", "MG", "PA", "PB", "PR", "PE", "PI", "RR", "RO", "RJ", "RN", "RS", "SC", "SP", "SE", "TO"];
const div = document.getElementById('teste');

function divTeste() {
  div.innerHTML = estados.join("<br>");
}
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html, charset=UTF-8">
  <title> Teste de Array </title>
</head>

<body>
  <div id="teste"></div>
  <p>
    <button onclick="divTeste()" class="buttonBasic"> Enviar formulário </button>
</body>

</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .