0

Porque quando eu coloco document.write dentro do for ele lista certinho e no innerHTML ele só manda a ultima posição na div? Eu queria saber como faço para o for imprimir dentro da div desde o começo até o final da lista, mas eu não estou conseguindo.

<head>
  <meta charset=UTF-8/>
  <link rel="stylesheet" type="text/css" href="main.css">
  <script type="text/javascript" src="main.js"></script>
</head>

<body>
  <input type="text" id="text">
  <input type="button" id="click" value="click">
  <input type="button" id="mos" value="mostrar">
  <div id="div"></div>
</body>

<script>
  var lista = [];
  window.onload = function() {
    var text = document.getElementById("text");
    var click = document.getElementById("click");
    var mos = document.getElementById("mos");
    var div = document.getElementById("div");
    click.onclick = function() {
      lista.push(text.value + " <
        br / > "); } mos.onclick=function(){ for (var i = 0; i <
        lista.length; i++) {
        div.innerHTML = lista[i];
      }
    }
  }
</script>

1 Resposta 1

1

Acontece que várias chamadas seguidas ao document.write para escrever html na página são todas acumuladas. Veja o exemplo:

document.write("um");
document.write(" pequeno");
document.write("<br/><h1>Texto</h1>");

Logo pode perfeitamente ter um loop que faz document.write várias vezes. Mas com innerHTML não funciona assim a menos que concatene o novo html com o anterior, utilizando o operador +=. Porque quando faz várias vezes .innerHTML = algo; :

for (var i = 0; i < lista.length; i++) {
    div.innerHTML = lista[i];
    //            ^--
}

Está a substituir o html anterior pelo novo, ficando sempre apenas com a ultima alteração. Altere essa linha para utilizar o += assim:

for (var i = 0; i < lista.length; i++) {
    div.innerHTML += lista[i];
    //            ^--
}

Veja esta alteração no seu código a funcionar:

<head>
  <meta charset=UTF-8/>
  <link rel="stylesheet" type="text/css" href="main.css">
  <script type="text/javascript" src="main.js"></script>
</head>

<body>
  <input type="text" id="text">
  <input type="button" id="click" value="Inserir texto">
  <input type="button" id="mos" value="Mostrar">
  <div id="div"></div>
</body>

<script>
  var lista = [];
  window.onload = function() {
    var text = document.getElementById("text");
    var click = document.getElementById("click");
    var mos = document.getElementById("mos");
    var div = document.getElementById("div");
    click.onclick = function() {
      lista.push(text.value + " <br / > ");
      text.value = "";
    }
    mos.onclick = function() {
      for (var i = 0; i < lista.length; i++) {
        div.innerHTML += lista[i];
      }
    }
  }
</script>

1
  • Muito Obrigado me ajudou bastante
    – user95454
    Commented 17/09/2018 às 20:49

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