Функции 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;", это лучше стилями.
|
Цитата:
|
Ну она должна быть не активной до того момента, пока не будут заполнены все поля
|
Цитата:
|
Цитата:
|
Если на странице нужен просто калькулятор, форма не отправляется, то многое в ней что у вас просто лишнее. Здесь будем следить за вводом в полях, проверять ввод, и управлять доступностью кнопки.
Нужно обратить внимание на обрабатываемое событие (оно делегируется форме) input. О поддержке его можно прочесть здесь, следовательно и принимать решение - все норма или ... При обработке такого события вывод ошибок посредством alert будет просто раздражительным, поэтому будем выводить их на странице. Также сделаем не вывод ошибок во всех полях, а только для первого, в котором найдена ошибка. Также разобьем причину ошибки на два раздельных сообщения. <form id="bank">
<label>Сумма(руб.): </label>
<input type="text" name="summ" /><br /><br />
<label>Срок(мес.): </label>
<input type="text" name="srok" /><br /><br />
<label>Ставка(%):</label>
<input type="text" name="stavka" /><br /><br />
<label>Общая сумма: </label>
<input type="text" name="result" readonly /><br /><br />
<input type="button" id="run" value="Вычислить!" disabled />
</form>
<p id="error"></p>
<script>
document.getElementById('bank').addEventListener('input', function() {
let fld = this.elements, error = '';
[...fld].slice(0, 3).some((e) => {
if(!e.value || /\D/.test(e.value)) {
let f = e.previousElementSibling.textContent.match(/.+(?=\()/);
error = !e.value && `Заполните поле ${f}!` || `В поле ${f} разрешен ввод только цифр!`;
return true;
}
});
document.getElementById('error').textContent = error;
fld.run.disabled = error;
});
document.getElementById('run').addEventListener('click', calculate);
function calculate() {
this.form.result.value = (this.form.summ.value * (this.form.stavka.value/100/12) * this.form.srok.value).toFixed(2)
}
</script>
|
спасибо)
|
| Часовой пояс GMT +3, время: 15:17. |