Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.06.2020, 20:46
Новичок на форуме
Отправить личное сообщение для richlime Посмотреть профиль Найти все сообщения от richlime
 
Регистрация: 04.06.2020
Сообщений: 7

Функции 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>
Ответить с цитированием
  #2 (permalink)  
Старый 04.06.2020, 21:20
Новичок на форуме
Отправить личное сообщение для richlime Посмотреть профиль Найти все сообщения от richlime
 
Регистрация: 04.06.2020
Сообщений: 7

В общем, из одного скрипта, перекинул в первый, скажем так, объединил.
Выводит результат, но теперь другая проблема. Как задержать результат? Он показывается на пол секунды и пропадает.
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;
		  }
Ответить с цитированием
  #3 (permalink)  
Старый 04.06.2020, 21:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сообщение от richlime
Правильно ли я понимаю, что в скрипте может использоваться только одна функция, для другой нужно подключать еще один скрипт?
в одном скрипте, сколько угодно функций.
richlime,
читать https://learn.javascript.ru/introduction-browser-events
переходить на addEventListener при назначении обработчиков с on...
Ответить с цитированием
  #4 (permalink)  
Старый 04.06.2020, 21:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сообщение от richlime
Он показывается на пол секунды и пропадает
страница отправила данные и перешла на адрес action (так как пустой адрес, то перезагрузка на саму себя)
Ответить с цитированием
  #5 (permalink)  
Старый 04.06.2020, 21:27
Новичок на форуме
Отправить личное сообщение для richlime Посмотреть профиль Найти все сообщения от richlime
 
Регистрация: 04.06.2020
Сообщений: 7

и что делать?
Ответить с цитированием
  #6 (permalink)  
Старый 04.06.2020, 21:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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>
Ответить с цитированием
  #7 (permalink)  
Старый 04.06.2020, 21:34
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от richlime
в скрипте может использоваться только одна функция (function) или несколько?
Сколь угодно.

Не предполагается отправление формы? Тогда и кнопка 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)
}
Ответить с цитированием
  #8 (permalink)  
Старый 04.06.2020, 21:39
Новичок на форуме
Отправить личное сообщение для richlime Посмотреть профиль Найти все сообщения от richlime
 
Регистрация: 04.06.2020
Сообщений: 7

Спасибо) Уже разобрался
<form action="javascript:checkform()(this)" method="post" name="bank" align="center" onsubmit="return checkform(this)" style="color:#ED1302;" >
Вроде все работает)
Ответить с цитированием
  #9 (permalink)  
Старый 04.06.2020, 21:43
Новичок на форуме
Отправить личное сообщение для richlime Посмотреть профиль Найти все сообщения от richlime
 
Регистрация: 04.06.2020
Сообщений: 7

А еще, подскажите, пожалуйста, как с помощью атрибута disabled сделать так, чтобы кнопка "Вычислить" была неактивной, до того момента, пока все поля не будут заполнены?
Ответить с цитированием
  #10 (permalink)  
Старый 04.06.2020, 21:44
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Выбрасывайте action="javascript:checkform()(this)" (это вообще ошибка), method="post", onsubmit="return checkform(this)", это не лучший подход, align="center", style="color:#ED1302;", это лучше стилями.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Бесплатный курс JavaScript (18 уроков)  Bokal Учебные материалы 2 16.11.2014 20:20
Динамическая подгрузка Javascript функции Jnas Общие вопросы Javascript 6 04.02.2014 14:58
функции в javascript zub_samata Общие вопросы Javascript 28 27.01.2014 20:53
javascript запуск функции alexandr2006 Общие вопросы Javascript 4 15.07.2013 19:16
Интерпретатор Java на JS kobezzza Оффтопик 24 11.10.2012 18:32