Publicado em por MundoJS

Exercício Fácil – Evento com addEventListener()

O que são Eventos?

Eventos são ações que ocorrem em um sistema, resultando em interações que deixam as páginas web mais interessantes. Neste exercício, você deverá criar uma div com dois campos em HTML, chamados A e B, um botão chamado SOMAR, criando também uma função em JavaScript para somá-los. Utilizando o addEventListener, você deverá salvar os números assim que forem pressionados, utilizando-se da função “click”.

Requisitos:

Para este exercício, será necessário conhecimentos em Funções e Eventos.

Exercício:

Com base neste código HTML, crie a função soma e o evento addEventListener que irá receber os valores dos campos “inputValorA” e “inputValorB”.

Utilize este código HTML como base para realização do seu exercício:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Exercicio Eventos</title>
</head>

<body>
    <div id="calculo">
        <!-- Crie os dois campos chamados "inputValorA" e "inputValorB" -->
        <fieldset>
            <label for="inputValorA">Valor de A:</label>
            <input id="inputValorA" type="number" placeholder="Digite o valor de A:">
        </fieldset>
        <fieldset>
            <label for="inputValorB">Valor de B:</label>
            <input id="inputValorB" type="number" placeholder="Digite o valor de B:">
        </fieldset>

        <!-- Criar um botão chamado SOMA -->
        <button class="calculo" type="submit">Somar</button>
    </div>
    <script>
    </script>
</body>

</html>

PARTE 1:

Crie uma função que retorne o somatório dos valores digitados pelo usuário nos campos de formulário.

Caso precise de ajuda, acesse este exercício sobre funções: Exercicio fácil: Funções como Parâmetro/

Protótipo da Função Soma:

// Esta função irá retornar o somatório
// dos valores A e B recebidos nos campos do HTML
function soma(a, b) {
    
    console.log(soma);
}

Parâmetros:

A função deverá receber dois parâmetros, A e B.

Valor de retorno:

A função deverá imprimir no console o somatório dos valores A e B.

PARTE 2:

Crie um evento que receba os valores que foram digitados nos campos “inputValorA” e “inputValorB”. Para isto, você deverá criar uma variável chamada botaoCalculo e utilizar o document.querySelector para selecionar a classe do botão(“.calculo”).

Caso precise de ajuda em eventos, acesse este link e confira o artigo Eventos no JavScript: Eventos no JavaScript

Logo após, deverá criar uma função addEventListener que irá receber os valores digitados.

Realizados estes procedimentos, efetuar a chamada da função soma, que irá retornar o somatório no console.

// Cria-se uma variável para buscar o elemento cálculo
// e após isso, crie um addEventListener para receber os valores dos inputs do HTML
let botaoCalculo = document.querySelector(".calculo");
variavel.addEventListener("click", function (evt) {
    
    let a = // Atribua o valor digitado no inputValorA no formato inteiro
    let b = // Atribua o valor digitado no inputValorB no formato inteiro
    
    // Realize a chamada da função soma, passando como parâmetros A e B
    soma();
})

Resolução:

O seu console.log ficará assim:

Uma resposta para “Exercício Fácil – Evento com addEventListener()”

  1. let botao = document.querySelector(‘.calculo’)

    //Ao clicar, pega o valor dos inputs digitados, e conforme os parametros, ele soma.
    botao.addEventListener(‘click’, function(){
    let valorA = parseInt((document.getElementById(‘inputValorA’).value))
    let valorB = parseInt((document.getElementById(‘inputValorB’).value))
    console.log(soma(valorA,valorB));
    })

    //função soma, efetua a soma de dois números
    function soma(a, b){
    return a + b
    }

Deixe um comentário