Wypisanie liczb z pętli w divie

Question

Jak wypisać to co dzieje się z liczbami w  środku pętli w div-ie. W  consoli wypisuje te liczb tj. console.log(suma) natomiast poprzez document.getElementById('wynik1).innerHTML = suma; pokazuje mi tylko końcowy wynik. Nie widać tego co dzieje się w środku. Nie mogę tego rozgryźć przez co nie mogę rozwiązać zadania.

Kombinuję już sporo czasu :/. Czy może mnie ktoś naprowadzić? Myślałam o zagnieżdżeniu pętli?

<input value="TEST-1" type="button" onclick="test1()">
Podaj numer: <input type="number" id="x">
<div id="wynik1"></div>
<script>
function test1() {
   let x = document.getElementById('x').value;
   x = parseInt(x);
   let suma = 0;
    for(i=1; i<=x; i++) {
        suma += i;
        // document.getElementById('wynik1').innerHTML =   suma;
        // document.write(suma + " ");
        console.log(i + "<br>");
        console.log(suma);
    }
    document.getElementById('wynik1').innerHTML =  suma;
    // alert('Suma liczb: ' +suma);
}
</script>

 

Answer 1

Kod po drobnym makeupie:

<input value="TEST-1" type="button" onclick="test1()">
Podaj numer: <input type="number" id="x">
<div id="wynik1"></div>

function test1() {
  let x = parseInt(document.getElementById('x').value);
  let wynik = document.getElementById('wynik1');
  let suma = 0;
  let tekst = '';
  for(let i = 1; i <= x; i++) {
  	suma += i;
    tekst = tekst + i + ': ' + suma + '<br />';
    wynik.innerHTML = i + ': ' + suma;
    console.log(i + ': ' + suma);
  }
  wynik.innerHTML = tekst + '<hr />' + 'Suma liczb: ' + suma;
  console.log('Suma liczb: ' + suma);
  alert('Suma liczb: ' + suma);
}

 

Answer 2

Wewnątrz pętli for: 

document.getElementById('wynik1').innerHTML +=  suma;

Musisz do już istniejącej treści dopisać nową, bo w przeciwnym wypadku używając samego operatora przypisania nadpisujesz całość ostatnim wynikiem :)