В этой статье мы разберемся как сделать простой калькулятор на JavaScript. Наш калькулятор будет поддерживать функции сложения, вычитания, умножения и деления.
В первую очередь надо разобраться с html разметкой нашего калькулятора:
Мы создали два параграфа <p>, в них поместили по одному текстовому полю <inpyt type="text" id="n1"> и задали им идентификатор. В эти текстовые поля мы будем записывать наши значения, чей результат сложения, вычитания, умножения или деления мы хотим узнать.
Четыре кнопки <button> запускают процесс, результат которого будет выводиться в третьем параграфе с идентификатором "total".
Сейчас наш калькулятор выглядит вот так:
Пришло время добавить JavaScript, чтоб калькулятор начал выполнять нужные нам функции.
В файле JavaScript.js записываем следующий код:
Мы создали функции plus и minus, объявили переменные num1, num2 и result, получили значения num1 и num2 (num1 = document . getElementById ( 'n1' ) . value ;), преобразовали наши строки в числа с помощью функции parseInt. В переменной result прописали сложение и вычитание num1 и num2, а также вывели результат в параграфе total.
Теперь вы можете проверить результат сложения и вычитания, все должно работать.
Теперь проведем аналогичные действия с умножением и делением:
Думаю, объяснять здесь ничего не надо, все идентично, только надо поменять в переменной result +- на * и /.
Все наши кнопки работают и показывают правильный результат, этого мы добились возможностями JavaScript.
Давайте добавим немного стилей нашему калькулятору, для этого в html файле, до разметки калькулятора, внутри тега <style></style>, пропишем стили:
Результат должен получиться вот такой:
Вот мы и сделали простой калькулятор на html css и javascript. Надеюсь, что материал был понятным.
Спасибо за внимания, до встречи!