В нашей второй заметке о JavaScript мы поговорим о событии Click и функциях, но в частности о функции стрелки. Наш проект — это калькулятор ИМТ, который использует основные понятия в очень упрощенном виде.
Проект
Проект в стадии разработки
В HTML
Думая о событии Click, я буду использовать id кнопки для манипуляций в DOM.
<button id="button" type="button">Calcular IMC</button>
В JavaScript
Процесс прост, и мы рассмотрим три концепции
- addEventListener
- Функция стрелки
- innerHTML (Он понадобится нам для исправления ошибки)
Добавление события
Мы выбираем кнопку и добавляем событие Click Event, и с этого момента каждый раз, когда мы будем нажимать на кнопку, мы будем запускать функцию расчета BMI и добавлять результат в HTML.
document.getElementById("button").
addEventListener("click", () => {
Функция стрелок используется для того, чтобы сделать код более читабельным,
Нет необходимости писать зарезервированное слово функции или использовать возврат.
Теперь, используя эти три переменные, мы получаем входные значения и выбираем div, который получит конечный результат. Он был создан только для этой цели, и он пуст.
const height = document.getElementById("input-height").value;
const weight = document.getElementById("input-weight").value;
const container = document.getElementById("bmi-result");
Теперь мы видим переменную result, которая инициализируется значением. Он получит HTML-элемент, который мы создаем с помощью createElement, чтобы получить результат.
textContent — это значение созданного H3, а запускаемая функция, как вы видите, была объявлена вне области видимости функции Arrow.
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;
}
Этой идеи достаточно для решения задачи, но не без создания довольно забавной ошибки
Каждый раз, когда мы нажимаем на кнопку, процесс повторяется. Затем мы создаем новый тег H3, и результат снова вставляется в HTML. Это ошибка, сбой в логике нашего кода, но ее можно решить одной строчкой.
InnerHTML
//Remover resultado antigo
container.innerHTML = "";
Эта строка перед созданием тега H3 изменит содержимое div на пустое. Див остается.
Понимание этого важно, поскольку существуют функции JavaScript для удаления самого div.
Эта одна строчка решает ошибку и демонстрирует, что вы, dev, действительно продумываете каждую строчку своего кода. Почаще пользуйтесь этими советами.
Этот пост написан мной ✨❤️.
И это второй из серии из 4 постов об этом проекте. В следующей статье я планирую рассказать о шаблонах CSS, которые я использую.
Если вы хотите что-то добавить, предложить исправить или поговорить о технологиях и тому подобном, вы можете связаться со мной в Instagram или по электронной почте contato.elisadrumond@gmail.com.