Расчет вычислений js по одной кнопке

Нет комментариев · Категория: Кодинг Просмотров: 399

Итак, я соскучилась по кодингу и решила написать или, правильнее будет сказать, дописать маленький расчет на js. Как известно, программисты люди ленивые, поэтому я нашла оптимальный код в сети и модифицировала его под свои потребности.

Есть скрипт, который вычисляет процент от числа. Скрипт работает только с целыми положительными значениями.
Но надо вводить число и затем еще процент, который вам надо найти. Мне понравилось то, что код очень короткий и работает прямо в html без подключения js из другого файла.

Код.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Вычисление процента от числа</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<!--Заголовок--->
<center><b>Вычисление процента от числа</b>
<!--Создаём форму procent --->
<form name="procent">
<!--Поле для ввода числа --->
<p>Введите число:<input type="text" name="a" size=10></p>
<!--Поле для ввода процента --->
<p>Введите процент:<input type="text" name="b" size=10></p>
<!--Кнопка для вычисления --->
<!--Вычисляем так: procent=переменную из поля a * на переменную поля b и / на 100--->
<p><input type = "button" value="Вычислить"
OnClick = "document.procent.c.value=document.procent.a.value*document.procent.b.value/100"></p>
<!--Поле для вывода результата--->
<p><INPUT type="text" name="c" size=10> </p>
<!--Кнопка для очистки формы--->
<input type="reset"> </center>
</form>
</body>
</html>

Но, мне нужно было кое-что другое. Задача ввести число и одной кнопкой произвести расчет и подстановку в определенное место на странице. У нас есть 10 статей расходов, которые составляют 100% (некоторые повторяются): 3, 5, 7, 10, 15 и 25 процентов. Вы спросите, откуда такие данные? Ответ, искусственный интеллект на сайте ChatGPT сказал, какие статьи расхода бывают и сколько это процентов. Вот что получилось. Можете считать прямо здесь без перезагрузки страницы.

Создала одностраничный сайт, дизайн взяла с просторов, скажу честно. Форма выглядит получше, добавила стиль, цвет (см. скрин ниже).

Код.

<form name="procent">
<p>Введите ваш доход в рублях <input type="text" name="a" size=10>
<input type="button" class="btn btn-primary" type="button" value="Вычислить" OnClick = 
"document.procent.c3.value=document.procent.a.value*3/100; 
document.procent.c5.value=document.procent.a.value*5/100; 
document.procent.c6.value=document.procent.a.value*5/100; 
document.procent.c7.value=document.procent.a.value*7/100; 
document.procent.c10.value=document.procent.a.value*10/100; 
document.procent.c11.value=document.procent.a.value*10/100;
document.procent.c12.value=document.procent.a.value*10/100;
document.procent.c15.value=document.procent.a.value*15/100; 
document.procent.c16.value=document.procent.a.value*15/100;
document.procent.c25.value=document.procent.a.value*25/100;"></p>
25% Расходы на жилье - <output name="c25"> </output> рублей<br />
15% Коммунальные услуги - <output name="c15"> </output> рублей<br />
15% Еда - <output name="c16"> </output> рублей<br />
10% Образование - <output name="c10"> </output> рублей<br />
10% Здоровье - <output name="c11"> </output> рублей<br />
10% Сбережения - <output name="c12"> </output> рублей<br />
5% Одежда и аксессуары - <output name="c5"> </output> рублей<br />
5% Развлечения - <output name="c6"> </output> рублей<br />
7% Транспорт - <output name="c7"> </output> рублей<br />
3% Личный уход - <output name="c3"> </output> рублей<br /><br/>
<input type="reset" class="btn btn-success" type="button" class="button">
</form>

Итак, каждый результат 10-ти статей имеет свое уникальное имя с5, с3 и т.д. и вывод результата сделала через output name=» c3 «. Вот и всё. Смотрите результат на сайте http://www.bingam.beget.tech.