1
resposta

Como eu faço para modificar um número de html no Javascript?

Eis meu problema. Eu estou tentando modificar o <input/> no java porém não estou tendo êxito. a ideia é simples, o usuário pega escreve um número. esse número primeiro é analisado, ele verifica se é um número, depois ele verifica se o numero é 1 ou -1 ( pois se for vai dar um loop infinito), depois ele pega o número e começa a modifica-lo. Mas quando ele passa no isNaN ele identifica como texto, mesmo eu colocando parseInt no document.querySelector("input").

<meta charset="UTF-8">

Escolha um número. Ele será multiplicado por ele mesmo até ser maior que 1 milhão.
</br>
Depois lhe falará qual foi o resultado e quantas vezes ele multiplicou por ele mesmo.
</br></br>

<input/>
<button> Clica pra testar </button>

<script>

    function pula() {

        document.write("<br>");

}

    function mostra(frase) {

        document.write(frase);
        pula();
}

    function verifica() {

        mostra(numero.value)

        if (isNaN(numero.value)) {
            alert("Isso nem é um número cara... tenta novamente.")
            mostra("Pressione: Ctrl + R")
            exit()

        } else {
            if (numero.value != 1 && numero.value != (-1)) { 
                for (var quantas = 0;numero.value <= 1000000;quantas = quantas + 1) {
                    mostra(numero.value + " vezes " + N);
                    numero.value = (numero.value * N);



            }} else { 
                alert("1 vezes 1 é 1 animal.");
                mostra("Impossível continuar por que 1 vezes 1 é igual 1 e nunca chegará à 1 milhão. Reinicie e tente novamente.");
                mostra("Pressione: Ctrl + R")
                exit();
        }}
        mostra("O resultado final foi o número : " + numero);

        mostra("O número que você escolheu foi multiplicado " + quantas + " vezes até passar de 1 milhão.");
}

var numero = document.querySelector("input")

var N = numero.value
var quantas = 0
var button = document.querySelector("button")
button.onclick = verifica 



</script>

Nessa última tentativa começou a dar erro depois que aperta o botão, imagino eu por que eu coloquei todos os número como numero.value

Alguém pode me ajudar?

1 resposta

Oi Hugo!

O seu código tem alguns pontos de melhoria, especialmente no laço de repetição for que faz a multiplicação. Veja abaixo um exemplo refatorado:

  <script>

    var numero = document.querySelector("input")
    var button = document.querySelector("button")
    button.onclick = verifica

    function pula() {
      document.write("<br>");
    }

    function mostra(frase) {
      document.write(frase);
      pula();
    }

    function verifica() {
      mostra(numero.value)
      if (isNaN(numero.value)) {
        alert("Isso nem é um número cara... tenta novamente.")
        mostra("Pressione: Ctrl + R")
      } else {
        if (numero.value != 1 && numero.value != (-1)) {
          var acumulador = 0;
          for (var quantas = 0; quantas <= 1000; quantas++) {
            mostra(numero.value + " vezes " + numero.value);
            acumulador += (numero.value * numero.value);
          }
        } else {
          alert("1 vezes 1 é 1 animal.");
          mostra("Impossível continuar por que 1 vezes 1 é igual 1 e nunca chegará à 1 milhão. Reinicie e tente novamente.");
          mostra("Pressione: Ctrl + R")
        }
      }
      mostra("O resultado final foi o número : " + acumulador);
      mostra("O número que você escolheu foi multiplicado " + quantas + " vezes até passar de 1 milhão.");
    }

  </script>

Pontos principais:

  • A variável quantas é a variável de controle do laço, então é a partir dela que devemos fazer a condição de parada do laço com quantas <= 1000000. Aproveitei para diminuir o número para 1000 para ficar um pouco mais rápido, pois o navegador "sofre" para processar um laço com tantos passos e pode travar seu computador.
  • Criei do lado de fora do for uma variável para guardar o valor acumulado var acumulador = 0. Não podemos modificar numero.value pois precisamos desse valor fixo para fazer o cálculo e se fizermos numero.value = (numero.value * N) o valor de numero.value está somente sendo reatribuído (trocado) e não acumulado. Também retirei a variável N pois ela não era mais necessária.
  • Após o final do laço, a variável acumulador deve guardar o valor final da conta. Aí podemos utilizá-la para exibir este valor na tela ao invés de numero, que (apesar do nome) é um elemento HTML inteiro e não um número.

Espero ter ajudado!

Bons estudos ;)