Мне нужно создать подобие калькулятора с таким списком полей:
Число 1 – однострочное поле
Число 2 – однострочное поле
Функция – выпадающий список со значениями (sum, sub, div, mul, pow, sqrt)
Результат - однострочное поле.
При нажатии на кнопку, проверяется допустимость введенных значений для выбранной арифметической операции В случае ошибки ввода выдать сообщение. Далее выполнить операцию и сравнить с введенным значением в поле «Результат». Если не совпало выдать сообщение об ошибке.
Если все успешно - переход на другую страницу. У меня в любом случае переходит на другую страницу
Визуально форма выглядит вот так (для лучшего понимания задачи):
<form style="margin: 0 100px" action="index2.html" onsubmit="return toSecondPage()">
<p>Первое число:<input id = "number1" required><span id="warningMessage"></span></p>
<p>Второе число:<input id = "number2" required><span class="warningMessage"></span></p>
<p>
Действие:
<select id="action">
<option value="sum">sum</option>
<option value="sub">sub</option>
<option value="mul">mul</option>
<option value="pow">pow</option>
<option value="div">div</option>
<option value="sqrt">sqrt</option>
</select>
</p>
<p>Ваш результат:<input id = "userResult" required><span class="warningMessage"></span></p>
<input type="submit" value="Check result">
</form>
let warning = document.getElementsByClassName("warningMessage")
let act = document.getElementById('action').value;
let num1 = Number(document.getElementById('number1').value);
let num2 = Number(document.getElementById('number2').value);
let userRes = Number(document.getElementById('userResult').value);
let trueRes = 0;
//Проверяю вернули ли все функции 'true', если да - перехожу на другую станицу
function toSecondPage(){
if (checkNumbers() && action() && CheckResult()) {
return true;
}
else {
return false;
}
}
//Проверяю заполнены ли поля числами, Почему-то когда я ввожу строку - программа все равно воспринимает как тип number
function checkNumbers(){
if(isNaN(num1) || isNaN(num2) || isNaN(userRes)){
warning[0].innerHTML = "Поле должно быть заполнено числом!"
warning[1].innerHTML = "Поле должно быть заполнено числом!"
warning[2].innerHTML = "Поле должно быть заполнено числом!"
return false;
}
else{
return true;
}
}
//Выполняю арифметические действия
function action(){
if(act == "sum"){
trueRes = num1 + num2
return true;
}
else if(act == "sub"){
trueRes = num1 - num2
return true;
}
else if(act == "mul"){
trueRes = num1 * num2
return true;
}
else if(act == "sum"){
trueRes = Math.pow(num1, num2)
return true;
}
else if(act == "div"){
if(num2 === 0){
warning[1].innerHTML = "Ошибка, деление на ноль!"
return false;
}
else{
trueRes = num1 / num2
return true;
}
}
else if(act == "sqrt"){
if(num1 <= 0){
warning[0].innerHTML = "Число должно быть больше 0!"
return false;
}
else{
trueRes = Math.sqrt(num1);
return true;
}
}
}
//Проверяю сходится ли истинный результат с результатом пользователя
function CheckResult(){
if(userRes !== trueRes){
warning[0].innerHTML = `Вы ошиблись, правильный результат: ${trueRes}`
return false;
}
else{
return true;
}
}