-1

Estou aprendendo JavaScript e estou tendo problema para mostrar na tela o laço dos números colocados dentro dos inputs.

function contar(){
    var inicio = Number(document.getElementById('inicioNumero').value)
    var fim = Number(document.getElementById('fimNumero').value)
    var passo = Number(document.getElementById('passoNumero').value)
    var res = document.getElementById('res')
    
    for(var i = 0; i <= fim; i+= passo){
      res+=(`=>${i}`)
    }
    document.getElementById('contar').innerText = res

}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Super Contador</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        Vamos Contar
    </header>
    <section>
        <div>
            Início: &nbsp; <input type="number" name="inicio" id="inicioNumero">
        </div>

        <div>
            Fim: &nbsp;&nbsp;&nbsp;&nbsp; <input type="number" name="fim" id="fimNumero">
        </div>

        <div>
            Passo: &nbsp;<input type="number" name="passo" id="passoNumero">
        </div>

        <div id="button">
            <input type="submit" value="Calcular" onclick="contar()">
        </div>
        <div id="res">Calcular:</div>
    </section>

    <script src="js/script.js"></script>
    </script>
</body>
</html>

1
  • 2
    tem alguns erros no seu código: 1) nessa linha var res = document.getElementById('res') está pegando o elemento, mas na linha res+=(=>${i}) está adicionando algo, que não pode se feito no elemento, acho que deseja o conteúdo, certo? então faltou pegar o conteúdo do div: var res = document.getElementById('res').innerText por exemplo. 2) depois do for está tentando usar um elemento que não existe no html, o "contar". Aqui não seria o elemento "res"? ou então crie o elemento com ID="contar" Commented 26/05/2020 às 0:34

1 Resposta 1

1

Seu código possui alguns erros.

No HTML você possui uma tag </script> a mais.

No JavaScript:

  • Opte sempre por usar o let, minha opinião esqueça que o var existe. Veja mais sobre isso variáveis usando let e var
  • a variavel res (que alterei o nome para lista) não deve armazenar nenhum valor inicialmente.
  • Seu laço for deve:
    • começar com o valor da variável inicio;
    • ir até o valor da variável fim;
    • e ser incrementando com valor da variável passo
  • Depois o valor da variável lista deve ser inserido na div com id res

function contar() {
    // Valor de inicio
    let inicio = Number(document.getElementById('inicioNumero').value);

    // Valor final
    let fim = Number(document.getElementById('fimNumero').value);

    // Valor do passo (valor que será incrementado)
    let passo = Number(document.getElementById('passoNumero').value);

    // Variável onde os valores serão armazenados.
    let lista = "";

    for (let i = inicio; i <= fim; i += passo) {
        lista += (` =>${i} `)
    }

    // Inserir valor da variável lista na div com id res
    document.getElementById('res').innerText += lista;

}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Super Contador</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
    Vamos Contar
</header>
<section>
    <div>
        Início: &nbsp; <input type="number" name="inicio" id="inicioNumero">
    </div>

    <div>
        Fim: &nbsp;&nbsp;&nbsp;&nbsp; <input type="number" name="fim" id="fimNumero">
    </div>

    <div>
        Passo: &nbsp;<input type="number" name="passo" id="passoNumero">
    </div>

    <div id="button">
        <input type="submit" value="Calcular" onclick="contar()">
    </div>
    <div id="res">Calcular: </div>
</section>

<script src="js/script.js"></script>
</body>
</html>

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