Show JS for loop output

Asked

Viewed 55 times

-1

I am learning Javascript and am having trouble showing on the screen the loop of numbers placed inside the 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>

javascript html html5
  • 2

    has some errors in your code: 1) on that line var res = document.getElementById('res') is picking up the element, but on the line res+=(=>${i}) is adding something, that can not be done in the element, I think you want the content, right? then missed take the content of div: var res = document.getElementById('res').innerText for example. 2) after the for is trying to use an element that does not exist in html, the "count". Here would not be the element "res"? or create the element with ID="count"

1 answer

1

Your code has some errors.

In the HTML you own a tag </script> the most.

In the Javascript:

  • Always choose to use Let, my opinion forget that the var exists. See more about this variables using Let and var
  • the variable res (I changed the name to lista) shall not store any value initially.
  • Your noose for must:
    • start with variable value inicio;
    • go to variable value fim;
    • and be incremented with variable value passo
  • Then the variable value lista shall be inserted in the div with 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>

Browser other questions tagged javascript html html5

You are not signed in. Login or sign up in order to post.