0

function contar() {
    let inicio= document.getElementById('inicio').value
    let fim= document.getElementById('fim').value
    let passo= document.getElementById('passo').value
    let res= document.getElementById('res')
    res.innerHTML=`Resultado:<br>`

    if(inicio!=0 && fim!=0 && passo!=0){

       for(let c = inicio ; c <= fim ; c += passo) {
            
            res.innerHTML+=`${c}`

        }
    }
    else{
        alert('[ERRO] Não foi inserido os valores     corretamente, tente novamente.')
    }
}
body{
    background: rgb(2, 168, 168);
    font: normal 20pt Arial;
    width: 600px;
    margin: auto;
    margin-top: 200px;
}
header{
    color: white;
    text-align: center;
}
section{
    background: white;
    border-radius: 10px;
    padding: 15px;
    width: 500px;
    margin: auto;
    box-shadow: 6px 6px 6px 6px rgba(0, 0, 0, 0.288);
    text-align: left;
}
footer{
color: white;
    text-align: center;
    font-style: italic;
}
<!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>Exercício Repetição</title>
    <link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body >
        <header>
            <h1 id="title">Repetições</h1>
        </header>
        <section>
            <div id="inputs">
              <p>
                <label>Início:</label>
                <input type="number" id="inicio">
              </p>
                <label>Fim:</label>
                <input type="number" id="fim">
              <p>
                <label>Passo:</label>
                <input type="number" id="passo">
              </p>
                <input type="button" value="Contar" onclick="contar()">

            </div>
            <div id="res">
                
            </div>
        </section>
        <footer>
            <p>&copy; Joao</p>
        </footer>
        
    <script src="script.js"></script>   
</body>
</html>

Aqui:

if(inicio!=0 && fim!=0 && passo!=0){

   for(let c = inicio ; c <= fim ; c += passo) {
        
        res.innerHTML+=`${c}`

    }
}
2
  • 2
    Seja bem-vindo. Imagino que não tenha ouvido falar em debugging, debugar ou depurar código. É possível em diversos navegadores também, é só apertar F12 e aprender como usar para inspecionar seu código e ver como ele está se comportando. Dê uma pesquisada a respeito.
    – Piovezan
    Commented 14/02/2021 às 8:02
  • 3
    Relacionada (de modo geral sobre a importância de ser explícito em relação às conversões de tipos): pt.stackoverflow.com/questions/478394/… Commented 14/02/2021 às 15:50

1 Resposta 1

3

O seu problema é que você está realizando operações matemáticas com string. document.getElementById('..').value retorna uma string, por mais que o input seja do tipo "number", e isso gera comportamentos inesperados.

Como resolver isso?

  • Conversão!

Converta os tipos string para número simplismente adicionando um + na frente da variável.

Veja como:

let inicio = document.getElementById('inicio').value;
let fim = document.getElementById('fim').value;
let passo = document.getElementById('passo').value;
let res = document.getElementById('res');

// convertemos aqui o "fim", "passo" e "inicio" para número
fim = +fim;
passo = +passo;
inicio = +inicio;

Veja como ficaria a função contar:

function contar() {
  let inicio = document.getElementById('inicio').value;
  let fim = document.getElementById('fim').value;
  let passo = document.getElementById('passo').value;
  let res = document.getElementById('res');

  fim = +fim;
  passo = +passo;
  inicio = +inicio;

  res.innerHTML = `Resultado:<br>`;

  if (inicio != 0 && fim != 0 && passo != 0) {
    for (let c = inicio; c <= fim; c += passo) {
      res.innerHTML += ` - ${c}`;
    }
  } else {
    alert(
      '[ERRO] Não foi inserido os valores corretamente, tente novamente.',
    );
  }
}

O código funcionando:

function contar() {
  let inicio = document.getElementById('inicio').value;
  let fim = document.getElementById('fim').value;
  let passo = document.getElementById('passo').value;
  let res = document.getElementById('res');

  fim = +fim;
  passo = +passo;
  inicio = +inicio;

  res.innerHTML = `Resultado:<br>`;

  if (inicio != 0 && fim != 0 && passo != 0) {
    for (let c = inicio; c <= fim; c += passo) {
      res.innerHTML += ` - ${c}`;
    }
  } else {
    alert(
      '[ERRO] Não foi inserido os valores corretamente, tente novamente.',
    );
  }
}
body {
  background: rgb(2, 168, 168);
  font: normal 20pt Arial;
  width: 600px;
  margin: auto;
  margin-top: 200px;
}
header {
  color: white;
  text-align: center;
}
section {
  background: white;
  border-radius: 10px;
  padding: 15px;
  width: 500px;
  margin: auto;
  box-shadow: 6px 6px 6px 6px rgba(0, 0, 0, 0.288);
  text-align: left;
}
footer {
  color: white;
  text-align: center;
  font-style: italic;
}
<!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>Exercício Repetição</title>
    <link rel="stylesheet" type="text/css" href="estilo.css" />
  </head>
  <body>
    <header>
      <h1 id="title">Repetições</h1>
    </header>
    <section>
      <div id="inputs">
        <p>
          <label>Início:</label>
          <input type="number" id="inicio" />
        </p>
        <label>Fim:</label>
        <input type="number" id="fim" />
        <p>
          <label>Passo:</label>
          <input type="number" id="passo" />
        </p>
        <input type="button" value="Contar" onclick="contar()" />
      </div>
      <div id="res"></div>
    </section>
    <footer>
      <p>&copy; Joao</p>
    </footer>
  </body>
</html>

Adicionei um - em res.innerHTML += ' - ${c}'; apenas para facilitar a visualização...

com uso de TypeScript, evitariamos esses problemas ...

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

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