Skip to main content
adicionou 108 caracteres ao conteúdo
Fonte Link
Cmte Cardeal
  • 7mil
  • 5
  • 27
  • 54

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.

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

com uso de TypeScript, evitariamos esses problemas ...

O seu problema é que você está realizando operações matemáticas com string. document.getElementById('..').value retorna uma string e isso gera comportamentos inesperados.

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

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.

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

com uso de TypeScript, evitariamos esses problemas ...

Fonte Link
Cmte Cardeal
  • 7mil
  • 5
  • 27
  • 54

O seu problema é que você está realizando operações matemáticas com string. document.getElementById('..').value retorna uma string 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...