1
How can I make input(range) numbers dynamically appear within the input(id="demu"). In case here the number has to be typed through the prompt and it print out of the input(id="demu"). Any suggestions?
function myFunction(val) {
document.getElementById('demo').innerHTML = val;
}
var n = prompt('Digite um número: ');
var unidades = [
'Zero',
'Um',
'Dois',
'Três',
'Quatro',
'Cinco',
'Seis',
'Sete',
'Oito',
'Nove',
];
var especiais = [
'Dez',
'Onze',
'Doze',
'Treze',
'Catorze',
'Quinze',
'Dezeseis',
'Dezsete',
'Dezoito',
'Deznove',
];
var dezenas = [
'Vinte',
'Trinta',
'Quarenta',
'Cinquenta',
'Sessenta',
'Setenta',
'Oitenta',
'Noventa',
];
var centenas = [
'Cem',
'Duzentos',
'Trezentos',
'Quatrocentos',
'Quinhetos',
'Seiscentos',
'Setescentos',
'Oitocentos',
'Novecentos',
];
//Valores com 1 algarismo
if (n.length === 1) {
//Imprimir unidadades
document.write(unidades[parseInt(n[0])]);
}
//Valores com 2 algarismos
else if (n.length === 2) {
//Especiais
if (
n[0] == '1' &&
(n[1] == '0' ||
n[1] == '1' ||
n[1] == '2' ||
n[1] == '3' ||
n[1] == '4' ||
n[1] == '5' ||
n[1] == '6' ||
n[1] == '7' ||
n[1] == '8' ||
n[1] == '9')
) {
document.getElementById('demu').innerHTML = especiais[parseInt(n[1])];
}
//Dezenas
else if (
(n[0] == '2' ||
n[0] == '3' ||
n[0] == '4' ||
n[0] == '5' ||
n[0] == '6' ||
n[0] == '7' ||
n[0] == '8' ||
n[0] == '9') &&
n[1] == '0'
) {
document.getElementById('demu').innerHTML = dezenas[parseInt(n[0] - 2)];
}
//Dezenas compostas
else {
document.write(
dezenas[parseInt(n[0] - 2)] + ' e ' + unidades[parseInt(n[1])]
);
}
}
//Valores com 3 algarimos
else if (n.length === 3) {
//Centenas inteiras
if (
(n[0] == '1' ||
n[0] == '2' ||
n[0] == '3' ||
n[0] == '4' ||
n[0] == '5' ||
n[0] == '6' ||
n[0] == '7' ||
n[0] == '8' ||
n[0] == '9') &&
n[1] == '0' &&
n[2] == '0'
) {
document.write(centenas[parseInt(n[0] - 1)]);
}
//Centenas + números especiais
else if (
(n[0] == '2' ||
n[0] == '3' ||
n[0] == '4' ||
n[0] == '5' ||
n[0] == '6' ||
n[0] == '7' ||
n[0] == '8' ||
n[0] == '9') &&
n[1] == '1' &&
(n[2] == '1' ||
n[2] == '2' ||
n[2] == '3' ||
n[2] == '4' ||
n[2] == '5' ||
n[2] == '6' ||
n[2] == '7' ||
n[2] == '8' ||
n[2] == '9')
) {
document.write(
centenas[parseInt(n[0] - 1)] + ' e ' + especiais[parseInt(n[2])]
);
}
//Centenas + Nº Compostos
else if (
(n[0] == '2' ||
n[0] == '3' ||
n[0] == '4' ||
n[0] == '5' ||
n[0] == '6' ||
n[0] == '7' ||
n[0] == '8' ||
n[0] == '9') &&
n[1] != '1'
) {
document.write(
centenas[parseInt(n[0] - 1)] +
' e ' +
dezenas[parseInt(n[1] - 2)] +
' e ' +
unidades[parseInt(n[2])]
);
}
//Cento + Nº Especiais
else if (
n[0] == '1' &&
n[1] == '1' &&
(n[2] == '1' ||
n[2] == '2' ||
n[2] == '3' ||
n[2] == '4' ||
n[2] == '5' ||
n[2] == '6' ||
n[2] == '7' ||
n[2] == '8' ||
n[2] == '9')
) {
document.write('Cento e ' + especiais[parseInt(n[2])]);
}
//Cento + Nº Compostos
else if (n[0] == '1' && n[1] != '1' && n[2] != '0') {
document.write(
'Cento e ' +
dezenas[parseInt(n[1] - 2)] +
' e ' +
unidades[parseInt(n[2])]
);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
<!-- jQuery and JS bundle w/ Popper.js -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"
></script>
<title>Desafio 1</title>
</head>
<body>
<div class="container">
<h1>Desafio 1 - JavaScript</h1>
<h3>Números por extenso</h3>
<label for="n1">Escolha um número entre 0 e 999</label>
<div class="input-group mb-3">
<div class="input-group-append">
<span class="input-group-text" id="demo" >500</span>
</div>
<input
type="range"
class="form-control"
oninput="myFunction(this.value)"
min="0"
max="999"
value="400"
id="txt"
/>
</div>
<span class="input-group-text" id="demu" ></span>
<script src="./js/script.js"></script>
</body>
</html>
He printa out of the
input(id="demu").
? Or you mean printa out of thespan
with theid="demu"
?– Cmte Cardeal
Yes exactly, I would like you to return within the span field"demu", only taking the numbers from the "demo" input that is dynamically modified when we change the position of the range.
– André