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>© Joao</p>
</footer>
</body>
</html>
Adicionei um -
em res.innerHTML += ' - ${c}';
apenas para facilitar a visualização...
com uso de TypeScript, evitariamos esses problemas ...