How to make the Input range dynamically by transforming number by Spellnumber(string)

Asked

Viewed 118 times

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 the span with the id="demu"?

  • 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.

1 answer

0


This error happens basically because you are using document.write() instead of document.getElementById('demu').innerHTML. That one .write() is adding the text at the end of the document, outside the span.

I made all the proper replacements of document.write() for document.getElementById('demu').innerHTML and solved the problem here.

Look how it turned out:

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.getElementById('demu').innerHTML = 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.getElementById('demu').innerHTML =
              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.getElementById('demu').innerHTML =
              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.getElementById('demu').innerHTML =
              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'
          ) {
            // Esta parte modificada resolve o problema do 909
            document.getElementById('demu').innerHTML =
              centenas[parseInt(n[0] - 1)] +
              ' e ' +
              (dezenas[parseInt(n[1] - 2)] ?  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.getElementById('demu').innerHTML =
              'Cento e ' + especiais[parseInt(n[2])];
          }

          //Cento + Nº Compostos
          else if (n[0] == '1' && n[1] != '1' && n[2] != '0') {
            document.getElementById('demu').innerHTML =
              '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>
  </body>
</html>

  • Good hint, but I would like that when the input range was changed it would automatically appear the number ex: 234 next to the bar and the number spelled out below, and if I move the range again it would automatically change the number and the text... All without using the propt

  • I was able to solve here by making the following change: var n = prompt('Type a number: '); by var n = val; E placing everything within the Function myFunction(val)

  • I just found another mistake here: Nine hundred and Undefined and Nine do not know why the number appears Undefined

  • I’ll analyze, but I think Voce typed 909, it wasn’t?

  • Yes all initial hundreds appear as Undefined: ex: 101, 102, 103...901, 903, 904

  • Wherever the comment is //Centenas + Nº Compostos, Voce will have to treat for when the middle number is 0. Just add the ternary: (dezenas[parseInt(n[1] - 2)] ? dezenas[parseInt(n[1] - 2)] + ' e ' : '' ). I’ll edit my answer to see.

  • In fact, you will have to do this check in all cases that have the number 0, whether in the hundreds, dozens or units.

  • Thank you, I will try to solve here in case I can send the code link.

Show 3 more comments

Browser other questions tagged

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