Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Bug] Problemas para mostrar resultados

por Estudante
| 58.2k xp | 14 posts
<!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">
    <link rel="stylesheet" href="/Exercício03/style.css">
    <title>Tabuada</title>

    <link rel="shortcut icon" href="/imagens/icon_tabuada.svg" type="imagens/icon_tabuada">
</head>
<body>
    <header>Tabuada</header>
    <section>
        <div class="numero">

            <p class="frase_input">Você deseja saber a tabuada de que número?</p>
            <input type="number" name="number" id="numero_desejado" class="numero_desejado" placeholder="número">

        </div>
        <div>

           <input type="button" value="Calcular" onclick="Calcular()" class="botão_calcular" id="botão_calcular">
           <span class="resultado" id="resultado">...</span>

        </div>
    </section>
    <footer>
        ©anaclaracaldeira;
    </footer>
    <script src="/Exercício03/main.js"></script>
</body>
</html>

 function Calcular() {
    var número = document.getElementById('numero_desejado')
    var resultado = document.getElementById('resultado')
    var botão_calcular = document.getElementById('botão_calcular')

    if (número.value.length == 0){
         window.alert('Número inválido. Digite um número maior que 0')
    }else if (número.value > 0) {
        for (var contador = 1; contador > 10; contador++){
            window.alert(contador + "x" + número.value + "=" + Number(contador*número.value) + "<br>")
            
        }
    }
}

Quando eu tento rodar com um número inválido o alert aparece normalmente e quando tento colocar um número válido para que a tabuada seja mostrada nada acontece!!!!

Já tentei de tudo que sabia, pesquisei mas ainda assim não consegui solucionar:(

Coloquei esse alert na tentativa de ver qual era o problema, mas provavelmente é no loop já que nem isso está aparecendo.

1 resposta
solução!
por Renan Cezar Wuicik
| 3167.3k xp | 6165 posts
Instrutor Suporte Educacional Start By Alura

Olá, tudo bem contigo?

Eu fiz as correções necessárias no seu código e fiz algumas pequenas melhorias para ele funcionar da forma que você deseja!

Primeiramente seu HTML, bom, na verdade, nele eu somente coloquei uma tag <br/> nele para quebrar a linha e a primeira linha da tabuada não ficar ao lado do botão de "calcular", veja:

<div>
  <input type="button" value="Calcular" onclick="Calcular()" class="botão_calcular" id="botao_calcular">
  <br/>
  <span class="resultado" id="resultado">...</span>
</div>

Agora no JavaScript eu mexi em algumas coisas.

  1. Primeiro é necessário tirar os ascentos dos nomes das váriáveis e dos identificadores, isso não inpede o código de funcionar, mas é coisa de boas práticas;
  2. Em segundo eu coloquei um trecho de código para limpar o <input> toda vez que ele fosse usado: resultado.innerHTML = '';;
  3. E depois eu consertei o seu loop, pois na condição do seu loop for, você definiu contador > 10, o que significa que o loop só será executado se contador for maior que 10. No entanto, você provavelmente queria dizer contador <= 10, para que o loop seja executado enquanto contador for menor ou igual a 10;
  4. E por fim eu coloquei o resultado em ação e mudei o código de forma que a tabuada seja escrita no documento HTML, não em um alerta!
  5. Veja o seu código pronto já corrigido e pronto para uso, assim que você consertar os nomes das variáveis e id´s no HTML:
function Calcular() {
    var numero = document.getElementById('numero_desejado');
    var resultado = document.getElementById('resultado');
    /* Essa referencia não é necessária */
    // var botão_calcular = document.getElementById('botao_calcular');

    if (numero.value.length == 0){
         window.alert('Número inválido. Digite um número maior que 0')
    } else if (numero.value > 0) {
        resultado.innerHTML = ''; // Limpar o resultado anterior, se houver

        for (var contador = 1; contador <= 10; contador++){
            resultado.innerHTML += contador + "x" + numero.value + "=" + Number(contador * numero.value) + "<br>"; 
        }
    }
}

Eu fiz algumas observações extras no seu código para você entender o que foi alterado!

Em suma era isso, espero ter ajudado, caso precise eu estarei aqui!

Abraços e bons estudos.