Получение данных формы в js
Получение данных формы в JavaScript Калькулятор на JavaScript
Чтобы использовать значение из текстового поля, необходимо создать кнопку отправки и подключить функцию обработчика события нажатия кнопки. Подробнее об обработке нажатия кнопки в JavaScript
Алгоритм получения данных из текстового поля
<input id="имя текстового поля"/>
<button onclick="имя функции обработчика()">Отправить</button>
let имя переменной;
function имя функции обработчика () {
имя переменной= document.getElementById("имя текстового поля").value;
Операторы через ;
}
Чтобы получить числовое значение из текстового поля HTML формы, используется следующая конструкция
<input id="имя текстового поля"/>
<button onclick="имя функции обработчика()">Отправить</button>
let имя переменной;
function имя функции обработчика () {
имя переменной= Number(document.getElementById("имя текстового поля").value);
Операторы через ;
}
Пример JS сценария, в котором через текстовое поле вводится имя и выводится приветствие
<!DOCTYPE HTML>
<html>
<body>
<p>Введите своё имя</p>
<p><input id="name"/></p>
<p><button onclick="greetings()">Отправить</button></p>
<script>
let name;
function greetings() {
name = document.getElementById("name").value;
document.write('Здравствуйте, '+(name));
}
</script>
</body>
</html>
Изменение объекта на HTML странице
Чтобы изменить содержимое абзаца на Html странице с помощью javascript, необходимо использовать следующую конструкцию
<p id="имя абзаца"></p>
document.getElementById("имя абзаца").innerHTML = новое значение абзаца;
Напишем калькулятор на JavaScript. Выводятся два текстовых HTML поля для ввода чисел. Выводятся 4 кнопки: Сложить, Вычесть, Умножить, Разделить. Для каждой кнопки есть своя функция-обработчик, которая считывает числа из HTML полей и выполняет действия над ними. Выводится результат вычислений
Полный код калькулятора на JS
<!DOCTYPE HTML>
<html>
<body>
<p>Введите 1 число</p>
<p><input id="num1"/></p>
<p>Введите 2 число</p>
<p><input id="num2"/></p>
<p><button onclick="plus()">Сложить</button>
<button onclick="minus()">Вычесть</button>
<button onclick="times()">Умножить</button>
<button onclick="divide()">Разделить</button></p>
<p id="result"></p>
<script>
let num1;
let num2;
let result;
function plus(){
num1 = Number(document.getElementById("num1").value);
num2 = Number(document.getElementById("num2").value);
result = num1 + num2;
document.getElementById("result").innerHTML = result;
}
function minus(){
num1 = Number(document.getElementById("num1").value);
num2 = Number(document.getElementById("num2").value);
result = num1 - num2;
document.getElementById("result").innerHTML = result;
}
function times(){
num1 = Number(document.getElementById("num1").value);
num2 = Number(document.getElementById("num2").value);
result = num1 * num2;
document.getElementById("result").innerHTML = result;
}
function divide(){
num1 = Number(document.getElementById("num1").value);
num2 = Number(document.getElementById("num2").value);
result = num1 / num2;
document.getElementById("result").innerHTML = result;
}
</script>
</body>
</html>
Если нажать сложить то получится 9, аналогично работают и другие операции в калькуляторе
Вернуться к содержанию курса по JS Перейти к теме Изменение стилей с помощью js >>
Полезно : Регистрация домена и размещение сайта на хостинге
Поделиться
Нет комментариев. Ваш будет первым!