Функции Javascript
Здравствуйте, учусь тут js и задался вопросом "в скрипте может использоваться только одна функция (function) или несколько?". Правильно ли я понимаю, что в скрипте может использоваться только одна функция, для другой нужно подключать еще один скрипт?
Вот для примера. У меня есть функция для того, чтобы выдавалось сообщение об ошибке, если не заполнено хотя бы одно из трех полей («Сумма», «Срок» и «Ставка») и для проверки тех же самых полей для предотвращения ввода нечисловых данных. Есть еще одна функция для подсчета общей суммы вклада (Общая_Сумма =Сумма*(Ставка/100/12)*Срок.), но она почему-то не работает. Подскажите, пожалуйста, как ее исправить 1 функция (работает): function checkform(){
var z = document.forms["bank"]["summ"].value;
var a = document.forms["bank"]["srok"].value;
var b = document.forms["bank"]["stavka"].value;
valid = true;
if (document.bank.summ.value == "" || /\D/.test(z))
{alert("Вы не заполнили поле Сумма или ввели буквы вместо цифр")
valid=false;
}
else
if (document.bank.srok.value == "" || /\D/.test(a))
{alert("Вы не заполнили поле Срок или ввели буквы вместо цифр")
valid=false;
}
else if (document.bank.stavka.value == "" || /\D/.test(b))
{alert("Вы не заполнили поле Ставка или ввели буквы вместо цифр")
valid=false;
}
return valid;
}
2 функция (не работает): document.bank.onsubmit = function() {
var result = (this.summ.value * (this.stavka.value/100/12) * this.srok.value);
this.result.value = result.toFixed(2);
return false;
}
И форма: <form action="" method="post" name="bank" align="center" style="color:#ED1302;" > <label for="Cумма">Сумма(руб.): </label> <input type="text" name="summ" id="summ"/><br /><br /> <label for="Срок">Срок(мес.): </label> <input type="text" name="srok" id="srok"/><br /><br /> <label for="Cтавка">Ставка(%):</label> <input type="text" name="stavka" id="stavka"/><br /><br /> <label for="Общая сумма">Общая сумма: </label> <input type="text" name="result" readonly> <br /><br /> <input type="submit" name="submit" id="rezultat" value="Вычислить!" /> </form> |
В общем, из одного скрипта, перекинул в первый, скажем так, объединил.
Выводит результат, но теперь другая проблема. Как задержать результат? Он показывается на пол секунды и пропадает. function checkform(){
var a=document.bank.summ.value;
var b=document.bank.srok.value;
var c=document.bank.stavka.value;
var t=a*(c/100/12)*b;
document.bank.result.value=t;
var z = document.forms["bank"]["summ"].value;
var a = document.forms["bank"]["srok"].value;
var b = document.forms["bank"]["stavka"].value;
valid = true;
if (document.bank.summ.value == "" || /\D/.test(z))
{alert("Вы не заполнили поле Сумма или ввели буквы вместо цифр")
valid=false;
}
else
if (document.bank.srok.value == "" || /\D/.test(a))
{alert("Вы не заполнили поле Срок или ввели буквы вместо цифр")
valid=false;
}
else if (document.bank.stavka.value == "" || /\D/.test(b))
{alert("Вы не заполнили поле Ставка или ввели буквы вместо цифр")
valid=false;
}
document.bank.result.value=t;
return valid;
}
|
Цитата:
richlime, читать https://learn.javascript.ru/introduction-browser-events переходить на addEventListener при назначении обработчиков с on... |
Цитата:
|
и что делать?
|
richlime,
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
[name="bank"] {
color:#ED1302;
text-align: center;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
function checkform(event) {
event.preventDefault(); //отмена отправки данных из формы
var a = document.bank.summ.value;
var b = document.bank.srok.value;
var c = document.bank.stavka.value;
var t = a * (c / 100 / 12) * b;
document.bank.result.value = t;
var z = document.forms["bank"]["summ"].value;
var a = document.forms["bank"]["srok"].value;
var b = document.forms["bank"]["stavka"].value;
valid = true;
if (document.bank.summ.value == "" || /\D/.test(z)) {
alert("Вы не заполнили поле Сумма или ввели буквы вместо цифр")
valid = false;
} else
if (document.bank.srok.value == "" || /\D/.test(a)) {
alert("Вы не заполнили поле Срок или ввели буквы вместо цифр")
valid = false;
} else if (document.bank.stavka.value == "" || /\D/.test(b)) {
alert("Вы не заполнили поле Ставка или ввели буквы вместо цифр")
valid = false;
}
document.bank.result.value = t;
return valid;
}
document.bank.addEventListener("submit", checkform)
});
</script>
</head>
<body>
<form action="" method="post" name="bank">
<label for="Cумма">Сумма(руб.): </label>
<input type="text" name="summ" id="summ"/><br /><br />
<label for="Срок">Срок(мес.): </label>
<input type="text" name="srok" id="srok"/><br /><br />
<label for="Cтавка">Ставка(%):</label>
<input type="text" name="stavka" id="stavka"/><br /><br />
<label for="Общая сумма">Общая сумма: </label>
<input type="text" name="result" readonly>
<br /><br />
<input type="submit" name="submit" id="rezultat" value="Вычислить!" />
</form>
</body>
</html>
|
Цитата:
Не предполагается отправление формы? Тогда и кнопка submit не нужна, можно просто кнопкой вызывать расчет, причем проверку полей выполнять тут же, то есть все одной функцией. <form id="bank"> .... <input type="button" id="rezultat" value="Вычислить!" /> document.getElementById('rezultat').addEventListener('click', calculate);
function calculate() {
let fld = document.getElementById('bank').elements, error = [];
[...fld].slice(0, 3).forEach((e) => {
if(!e.value.trim() || /\D/.test(e.value)) error.push("Вы не заполнили поле "+e.previousElementSibling.getAttribute('for')+" или ввели буквы вместо цифр")
});
if(error.length) {
alert(error.join('\n'));
return;
}
fld.result.value = (fld.summ.value * (fld.stavka.value/100/12) * fld.srok.value).toFixed(2)
}
|
Спасибо) Уже разобрался
<form action="javascript:checkform()(this)" method="post" name="bank" align="center" onsubmit="return checkform(this)" style="color:#ED1302;" >Вроде все работает) |
А еще, подскажите, пожалуйста, как с помощью атрибута disabled сделать так, чтобы кнопка "Вычислить" была неактивной, до того момента, пока все поля не будут заполнены?
|
Выбрасывайте action="javascript:checkform()(this)" (это вообще ошибка), method="post", onsubmit="return checkform(this)", это не лучший подход, align="center", style="color:#ED1302;", это лучше стилями.
|
| Часовой пояс GMT +3, время: 15:00. |