Resolvendo o exercício | JavaScript: programando na linguagem da web


<button class="botao">Calcula</button>
<input class="numero">
<input class="tabuada">
<span class="resultado"></span>

<script>

    var botao = document.querySelector('.botao');
    var numero = document.querySelector('.numero');
    var tabuada = document.querySelector('.tabuada');
    var resultado = document.querySelector('.resultado');

    botao.addEventListener('click', function() {

        resultado.textContent = numero.value * tabuada.value;

    });


</script>

Dessa maneira daria certo?

<form id="formulario">
<button class="botao">Calcula</button>
<input class="numero">
<input class="tabuada">
<span class="resultado"></span>

const botao = document.querySelector('.botao')

botao.addEventListener('click', resultado)

function resultado(evento){
        evento.preventDefault();

        const formulario = document.querySelector('#formulario')

        const multiplicacao = resultadoConta(formulario);

        const conteudo = mostraResultado(multiplicacao)

        const span = document.querySelector('.resultado')

        span.appendChild(conteudo)

}

function resultadoConta(formulario){
        const dados = {
                numero: formulario.numero.value
                tabuada: formulario.tabuada.value        
        }
        return numero * tabuada
}

function mostraResultado(multiplicacao){
        const texto = document.createElement('span')
        texto.textContent = multiplicacao

        return texto;
}

Olá, Pedro, tudo bem contigo?

Que bacana que você pensou em um programa diferente para resolver a solução! É assim que podemos exercitar ainda mais nosso conhecimento. Obrigado por compartilhar com a gente :)

Vamos lá, primeiramente temos que colocar o código javascript dentro da tag script, ok? Assim:

<script>
// Seu código...
</script>

Colocando seu código no editor de texto, vi que ele já apontou um erro dentro da função resultadoConta:

        function resultadoConta(formulario){
                const dados = {
                        numero: formulario.numero.value
                        tabuada: formulario.tabuada.value        
                }
                return numero * tabuada
        }

O erro está em tabuada, pois dentro de um objeto você precisa separar os atributos por vírgula. Assim:

        function resultadoConta(formulario){
                const dados = {
                        numero: formulario.numero.value,  // separamos os atributos por vírgula
                        tabuada: formulario.tabuada.value        
                }
                return numero * tabuada
        }

Mas testando seu programa no navegador, ele ainda não exibe o resultado! Se você for no console do navegador, você verá o seguinte erro:

Print do console dizendo "Uncaught TypeError: Cannot read property 'value' of undefined"

Aqui diz que não existe a propriedade value de formulario.numero (ou melhor, diz que formulario.numero está como undefined). De fato! O input de número do seu formulário no HTML está apenas com a classe numero, mas para que o javascript consiga acessar o valor do campo, o input deve possuir o atributo id ou name com o valor numero (o mesmo vale para o input de tabuada). Por exemplo, fazendo assim:

        <input class="numero" name="numero">
        <input class="tabuada" name="tabuada">

Agora sim o javascript consegue acessar, por exemplo, o número através de formulario.numero.value.

Mas se você for testar novamente seu programa, ainda não está exibindo o resultado! Te convido a tentar descobrir o porquê antes de seguirmos adiante. (Dica: veja o erro no console do navegador)

Agora que você tentou resolver ou até mesmo já conseguiu resolver o problema, vamos analisar o erro do console:

Print do console dizendo "Uncaught ReferenceError: numero is not defined"

Aqui diz que numero não está definido na última linha dessa função:

            function resultadoConta(formulario) {
                const dados = {
                    numero: formulario.numero.value,
                    tabuada: formulario.tabuada.value
                }
                return numero * tabuada
            }

E realmente, você armazenou os valores numero e tabuada dentro do objeto dados! Para acessá-los, devemos utilizar dados.numero e dados.tabuada. Assim:

            function resultadoConta(formulario) {
                const dados = {
                    numero: formulario.numero.value,
                    tabuada: formulario.tabuada.value
                }
                return dados.numero * dados.tabuada
            }

E uma outra alternativa é simplesmente armazenar os valores do formulário diretamente em duas variáveis, em vez do objeto:

            function resultadoConta(formulario) {
                numero = formulario.numero.value
                tabuada = formulario.tabuada.value

                return numero * tabuada
            }

Agora sim o programa está funcionando completamente!

É isso, espero ter te ajudado! Qualquer dúvida estaremos aqui para responder. Bons estudos! :)

Mergulhe em programação