Problema com estrutura de Repetição JS

Front-end JavaScript
#1

Estou fazendo um contador em javascript mas a estrutura de repetição só mostra o resultado final do loop e não o loop em si detalhado, vou colocar o html e o javascript. Se alguem souber o que pode ser iria ajudar dms.

    <!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contador</title>
    <link rel="stylesheet" href="Contado.css">
</head>
<body>
    <header>
        <h1>Contador</h1>
    </header>
    <section>
        <div id="bloco">
            <p>Inicío: <input type="number" name="inicio" id="init"></p>
            <p>Fim: <input type="number" name="fim" id="end"></p>
            <p>Salto: <input type="number" name="salto" id="jump"></p>
            <button onclick="calcular()">Calcular</button>
            <div class="result">
                Carregando resultado...
            </div>
        </div>
    </section>
    <script src="Contador.js"></script>
</body>
</html>

function calcular() {

    var init = document.querySelector('#init') 

    var fim = document.querySelector('#end')

    var skip = document.querySelector('#jump')

    var res = document.querySelector('.result')

    let i = Number(init.value)

    let f = Number(fim.value)

    let s = Number(skip.value)

    for (;i < f;i += s) {

        res.innerHTML = i

    }

}
#2

O problema pode ser que a contagem acontece muito rápido.
Você quer o que? 1 segundo a cada iteração?

#3

eu quero que por exemplo : o inicio é 1 (número que vai começar )
o fim é 10 (número que termina)
o salto é 1 (vai saltar de um em um)

resultado: 1 2 3 4 5 6 7 8 9 10
mas o meu sai só resultado final (10)

#4

Então vc tem que concatenar. O seu código atual está substituindo a cada iteração.
Tente isso:

res.innerHTML = res.innerHTML + " " + i

E acho que pode usar res.innerText ao invés de innerHTML.

#5

Valeu pela tentativa , mas continua da msm forma /:

#6

Mostra o código atualizado

#7 
function calcular() {

var init = document.querySelector('#init') 

var fim = document.querySelector('#end')

var skip = document.querySelector('#jump')

var res = document.querySelector('.result')

let i = Number(init.value)

let f = Number(fim.value)

let s = Number(skip.value)

for (;i < f;i += s) {

    res.innerHTML = res.innerHTML + "  " + i

}

}

tambem tentei da mesma forma com innerText

#8

Contador
image.png873×358 17.6 KB

Seu código funciona. (https://jsfiddle.net/ncvdr9ax/)
Você só precisa apagar aquele “Carregando resultado…”

Tente recarregar o cache no seu navegador: CTRL + F5