Tag input e button - Operação aritimética | Lógica de programação

Olá, estou tentando construir um programa que capture um número digitado pelo usuário em um input e, ao clicar no botão 'calcular', exibir a tabuada do valor. Dei uma pesquisada, porém não decifrei qual o problema. O navegador também não apontou nenhum erro :/

Deixo o código abaixo.

!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <title>exfix01</title>
    </head>
    <body>
        <h1>Exercício de fixação - Lógica de Programação com JavaScript</h1>
        <p>Por favor, digite um número entre 0 e 100 para ser calculado a tabuada:</p>
        <input/>
        <button>calcular</button>
    </body>
    <script>
        var multiplicador = document.querySelector("input");
        var botao = document.querySelector("button");

        function calculaTabuada () {
            for (var multiplicando = 0; multiplicando <= 10; multiplicando++){
                var resultado = multiplicador * multiplicando;
                document.write(multiplicador+" X "+multiplicando+" = "+resultado);
            }
        }

        botao.onClick = calculaTabuada;
    </script>
</html>

Bom dia Leonardo, tudo bem?

Eu consegui identificar alguns erros, vamos lá!

1. onClick

O evento onClick pode ser atribuído de duas formas:

função addEventListener
atributo onclick

O que você fez de errado aqui foi bem simples: utilizou camelCase para atribuir a função. O correto é utilizar todas minúsculas.

botao.onClick !== botao.onclick

Agora você consegue executar sua função, mas ela não retorna o resultado esperado!

2. input X input.value

O seu multiplicador está atribuído ao elemento DOM de tag input. Porém, você está utilizando ele em uma operação aritmética, o que só pode dar errado.

var multiplicador = document.querySelector("input");
//...
    var resultado = multiplicador * multiplicando;
//...

Você pode alterar o nome da variável pra entrada e no início da sua função calculaTabuada armazenar o valor de entrada na variável multiplicador:

//...
var entrada = document.querySelector("input");
function calculaTabuada () {
    var multiplicador = entrada.value;
    //...

Agora você consegue ver o resultado esperado! Porém, está tudo desengonçado. Vamos alinhar tudo?

3. table

Para resolver o problema de bagunça na impressão dos números, basta envolver cada linha em um elemento que tenha display do tipo block. Um exemplo é a div. Porém, assim pode ficar feio, então vamos criar uma tabela:

function calculaTabuada () {
    var multiplicador = entrada.value;
    document.write('<table><tr><th>Multiplicação</th><th>Resultado</th></tr>');
    for (var multiplicando = 0; multiplicando <= 10; multiplicando++){
        var resultado = multiplicador * multiplicando;
        document.write('<tr><td>');
        document.write(multiplicador+" X "+multiplicando);
        document.write('</td><td>');
        document.write(resultado);
        document.write('</td></tr>');
    }
    document.write('</table>');
}

Outra coisa! Repare que eu alterei seu forloop para ter condição multiplicando <= 10 ao invés de ser só menor que. Isso garante que multiplicador * 10 também será calculado!

Aqui vai a alternativa com div:

function calculaTabuada () {
    var multiplicador = entrada.value;
    for (var multiplicando = 0; multiplicando <= 10; multiplicando++){
        var resultado = multiplicador * multiplicando;
        document.write('<div>'+multiplicador+' X '+multiplicando + ' = ' + resultado+'</div>');
    }
}

Conclusão

Agora tudo funciona como esperado! Lembre-se sempre de observar com cautela as maiúsculas e minúsculas do seu código, assim como os atributos de cada variável.

Espero ter ajudado! Boa sorte e bons estudos.

Marco

Mergulhe em programação

1. onClick

2. input X input.value

3. table

Conclusão