Задача: необходимо создать форму простейшего калькулятора, который сможет выполнять Сложение, Вычитание, Умножение или Деление двух Операторов (аргументов). Условия: 1. Код должен быть оформлен с использованием переменных. закрываться.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Калькулятор</title>
</head>
<body>
<h1>Калькулятор</h1>
<form>
<input type="number" name="op1" required>
<select name="operation" required>
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="number" name="op2" required>
<input type="submit" value="Вычислить">
</form>
</body>
</html>
Здесь мы создали форму с тремя полями ввода: для первого оператора (с атрибутом `type="number"` и именем `op1`), для второго оператора (также с атрибутом `type="number"` и именем `op2`) и для знака операции (как поле `select` с четырьмя вариантами: `+`, `-`, `*` и `/`). Также мы добавили кнопку для отправки данных (`type="submit"` и значение `Вычислить`).
Теперь нам необходимо написать код на языке JavaScript, который будет обрабатывать данные, введенные в форму, и выполнять нужную операцию. Для начала создадим переменные, в которые будут записываться значения введенных операторов и знака операции:
javascript
var op1 = Number(document.querySelector('[name="op1"]').value);
var op2 = Number(document.querySelector('[name="op2"]').value);
var operation = document.querySelector('[name="operation"]').value;
Здесь мы использовали метод `document.querySelector` для поиска элементов формы по их имени и получили их значения с помощью свойства `value`. Также мы преобразовали эти значения в числа с помощью функции `Number`.
Далее напишем код, который будет выполнять нужную операцию в зависимости от выбранного знака:
javascript
if (operation === '+') {
var result = op1 + op2;
} else if (operation === '-') {
var result = op1 - op2;
} else if (operation === '*') {
var result = op1 * op2;
} else if (operation === '/') {
var result = op1 / op2;
} else {
alert('Выберите знак операции');
}
Здесь мы использовали конструкцию `if ... else if ... else`, чтобы определить, какую операцию нужно выполнить. Если знак операции не был выбран, то выводим сообщение с помощью функции `alert`.
Наконец, создадим переменную для вывода результата и добавим ее на страницу:
javascript
var output = document.createElement('p');
output.textContent = result;
document.body.appendChild(output);
Здесь мы создали новый элемент `p` с помощью метода `document.createElement`, установили его текстовое содержимое (т.е. результат вычислений) с помощью свойства `textContent` и добавили его на страницу с помощью метода `appendChild`.
В итоге наш полный код на JavaScript будет выглядеть так:
javascript
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault();
var op1 = Number(document.querySelector('[name="op1"]').value);
var op2 = Number(document.querySelector('[name="op2"]').value);
var operation = document.querySelector('[name="operation"]').value;
if (isNaN(op1) || isNaN(op2)) {
alert('Введите числа');
return;
}
if (operation === '+') {
var result = op1 + op2;
} else if (operation === '-') {
var result = op1 - op2;
} else if (operation === '*') {
var result = op1 * op2;
} else if (operation === '/') {
var result = op1 / op2;
} else {
alert('Выберите знак операции');
return;
}
var output = document.createElement('p');
output.textContent = result;
document.body.appendChild(output);
});
Здесь мы также добавили обработчик события `submit` на форму, который будет запускаться при отправке данных. С помощью метода `event.preventDefault` мы предотвращаем перезагрузку страницы при отправке формы. Кроме того, мы добавили проверку на ввод чисел с помощью функции `isNaN`.
Таким образом, мы создали простейший калькулятор, который выполняет Сложение, Вычитание, Умножение или Деление двух Операторов с использованием переменных и выводит результат на страницу HTML.Нажимая «Регистрация» или «Войти через Google», вы соглашаетесь с Публичной офертой, даете Согласие на обработку персональных данных, а также подтверждаете что вам есть 18 лет
Нажимая «Регистрация» или «Войти через Google», вы соглашаетесь с Публичной офертой, даете Согласие на обработку персональных данных, а также подтверждаете что вам есть 18 лет