Evento Click, Arrow Function e Hacks JS #2
Tags: javascript, dom, devweb
Published: 2022-07-17 20:47:39

---
title: Evento Click, Arrow Function e Hacks JS #2
published: true
description: 
tags: javascript, dom, devweb
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

![Capa do Artigo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gflozr7gtqa9bw0lyfve.png)

No segundo post de **JavaScript** vamos pensar no Evento Click e nas funções, mas especificamente a Arrow Function. Nosso projeto é uma calculadora de IMC que utiliza os principais conceitos de forma bem simplificada.

## O Projeto

_Projeto em desenvolvimento_

![Calculadora de IMC - Etapa 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jhveyl335qynu4v4wdkz.png)

## No HTML

Pensando em Evento de click, vou utilizar o id do botão para a manipulação na DOM.

```HTML
<button id="button" type="button">Calcular IMC</button>
```

## No JavaScript

O processo é simples e vamos ver três conceitos

* addEventListener
* Arrow Function
* innerHTML (Vamos precisar para resolver um bug)

### Adicionando o Evento

Selecionamos o botão e adicionamos o Evento click e a partir desse momento, todas as vezes que clicarmos no botão, vamos disparar a função de cálculo de IMC e adicionar o resultado ao HTML.

```JAVASCRIPT
document.getElementById("button").
addEventListener("click", () => {
```

#### A Arrow Function serve para tornar o código mais legível, 

Sem a necessidade da escrita da palavra reservada **function** ou o uso de um **return**.

Agora, com o uso dessas três variáveis, conseguimos os valores de input e selecionamos a **div** que vai receber o resultado final. Ela foi criada apenas com esse intuito, e está vazia.

```JAVASCRIPT
const height = document.getElementById("input-height").value;
const weight = document.getElementById("input-weight").value;

const container = document.getElementById("bmi-result");
```

Agora, vemos a variável **result**, que é inicializada com um valor. Ela vai receber o elemento HTML que estamos criando, através do **createElement**, para receber o resultado.

o **textContent** é o valor do H3 criado e a função a ser disparada, foi declarada fora do escopo da Arrow function, como vocês podem ver.

```JAVASCRIPT
const result = document.createElement("h3");

result.textContent = calculateBMI(height, weight);
    
container.appendChild(result);


//Fora do escopo da Arrow Function
function calculateBMI(height, weight) {
    
    var bmi = (weight/(height*height)).toFixed(1);
    return bmi;
}
```

Essa ideia é suficiente para resolver o desafio, mas não sem criar um bug um tanto engraçado

![Calculadora de IMC - Bug] (https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9hxebw4noob9uuwcoid.png)

Cada vez que clicamos no botão, o processo repete. Então criamos uma nova Tag H3 e o resultado é novamente inserido no HTML. Isso é um bug, um mau funcionamento da lógica do nosso código, mas que se resolve com uma linha.

### InnerHTML

```JAVASCRIPT
//Remover resultado antigo
container.innerHTML = "";
```

Essa linha antes da criação da tag H3, vai trocar o conteúdo da div para vazio. a InnerHTML **não vai** excluir a div, mas sim substituir o conteúdo. A div permanece.

Entender isso é importante porque existem funcionalidades JavaScript para excluir a div em si.

Essa única linha resolve o bug e demonstra que você, dev, de fato pensa em cada linha do seu código. Use bastante dessas dicas.

---

Esse é um post escrito por mim :sparkles::heart:

E é o segundo de uma série de 4 posts sobre esse projeto. No próximo pretendo falar sobre os padrões CSS que uso.

Se você deseja adicionar algo, sugerir correção ou conversar sobre tecnologias e afins, pode me chamar no [Instagram](https://www.instagram.com/drumond_dev/) ou por e-mail no contato.elisadrumond@gmail.com