Калькулятор с radio и checkbox

@panii · Регистрация: 12.05.2016

Студворк — интернет-сервис помощи студентам

Создаю калькулятор. Нужно без подключении библиотек. Не получается условие при выборе checkbox. Может, кто подскажет, где ошибка. Вот код:
<!DOCTYPE html>
<html>
<head>
<title>Парикмахерская</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
table{
padding:5px;
border:1px #777777 solid;}
.x{
width:85px;
border:0px;}
table,.x,#itog{
background:#eeeeee;}
.x,td{
text-align:center;}
#itog{
color:red;}
</style>
<script>
function calc(pole)
{
var dl = document.getElementsByName("dl");
var col = document.getElementsByName("color");
var cu = document.getElementsByName("cut");
var fle = document.getElementsByName("fler");
var cena = document.getElementsByClassName("x");
var price = 0;
var arr = [60000,50000,40000];
var arr2 = [35000,30000,25000];
var arr3 = [15000,12000,10000];

for (i = 0; i < dl.length; i++) {
if (dl[i].checked)
{
if (col.checked){
for (i = 0; i < arr.length; i++)
price += arr[i];
}
if (col.checked && cu.checked) {
price += arr[i] + arr2[i];
}
if (col.checked && cu.checked && fle.checked){
price += arr[i] + arr2[i] + arr3[i];

}
}
pole.form.itog.value = price;
}
}
</script>
</head>
<body>

<table >
<tr><td colspan="5" align="center"><h3>Расчет стоимости услуг</h3></td></tr>
<form name="myForm" onsubmit="return calc(this);">
<tr><td colspan="2"></td><td colspan="3">Длина волос:</td></tr>
<tr><td colspan="2"></td><td>длинные<br/><input name="dl" type="radio" checked></td><td>средние<br/><input name="dl" type="radio"</td><td>короткие<br/><input name="dl" type="radio"</td></tr>
<tr><td><input type="checkbox" name="color"></td><td>Окраска</td><td><input class="x" type="text" name="d1" value="60000" readonly></td><td><input class="x" type="text" name="s1" value="50000" readonly></td><td><input class="x" type="text" name="k1" value="40000" readonly></td></tr>
<tr><td><input type="checkbox" name="cut"></td><td>Стрижка</td><td><input class="x" type="text" name="d2" value="35000" readonly></td><td><input class="x" value="30000" type="text" name="s2" readonly></td><td><input class="x" type="text" name="k2" value="25000" readonly></td></tr>
<tr><td><input type="checkbox" name="fler"></td><td>Укладка</td><td><input class="x" type="text" name="d3" value="15000" readonly></td><td><input class="x" value="12000" type="text" name="s3" readonly></td><td><input class="x" type="text" name="k3" value="10000" readonly></td></tr>
<tr><td colspan="3" align="center"><input type="button" onclick="calc(this);" value="Рассчитать"></td><td colspan="2"><input type="text" id="itog" name="itog" readonly></td></tr>
</form>
</table>
</body>

</html>

@dzendev · 13.05.2016, 11:09

document.getElementsByName - это коллекция элементов, поэтому обратиться к элементу так col.checked нельзя, надо по индексу обращаться col[0].checked

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function calc(pole)
{
    var dl = document.getElementsByName("dl");
    var col = document.getElementsByName("color");
    var cu = document.getElementsByName("cut");
    var fle = document.getElementsByName("fler");
    var cena = document.getElementsByClassName("x");
    var price = 0;
    var arr = [60000,50000,40000];
    var arr2 = [35000,30000,25000];
    var arr3 = [15000,12000,10000]; 
 
    for (i = 0; i < dl.length; i++) {
        if (dl[i].checked)
        {
            if (col[0].checked){
                price += arr[i];
            }
            if (cu[0].checked) {
                price += arr2[i];
            }
            if (fle[0].checked){
                price += arr3[i];
            }
 
        }
        
    }
    pole.form.itog.value = price;
}

В html ошибки есть
<input name="dl" type="radio"</td> нет закрывающей скобки >

@kalabuni · 13.05.2016, 11:28

Сообщение от panii

Создаю калькулятор.

мей би, вам стоит прежде попытаться освоить простейший редактор текстов и научиться хотя бы нормально выделять свой код BB-тегами, и уже только потом браться за "создание калькулятора"

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@panii 0 / 0 / 0 Регистрация: 12.05.2016 Сообщений: 1

	Калькулятор с radio и checkbox 12.05.2016, 23:26. Показов 3078. Ответов 2 Метки нет (Все метки) Создаю калькулятор. Нужно без подключении библиотек. Не получается условие при выборе checkbox. Может, кто подскажет, где ошибка. Вот код: <!DOCTYPE html> <html> <head> <title>Парикмахерская</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style> table{ padding:5px; border:1px #777777 solid;} .x{ width:85px; border:0px;} table,.x,#itog{ background:#eeeeee;} .x,td{ text-align:center;} #itog{ color:red;} </style> <script> function calc(pole) { var dl = document.getElementsByName("dl"); var col = document.getElementsByName("color"); var cu = document.getElementsByName("cut"); var fle = document.getElementsByName("fler"); var cena = document.getElementsByClassName("x"); var price = 0; var arr = [60000,50000,40000]; var arr2 = [35000,30000,25000]; var arr3 = [15000,12000,10000]; for (i = 0; i < dl.length; i++) { if (dl[i].checked) { if (col.checked){ for (i = 0; i < arr.length; i++) price += arr[i]; } if (col.checked && cu.checked) { price += arr[i] + arr2[i]; } if (col.checked && cu.checked && fle.checked){ price += arr[i] + arr2[i] + arr3[i]; } } pole.form.itog.value = price; } } </script> </head> <body> <table > <tr><td colspan="5" align="center"><h3>Расчет стоимости услуг</h3></td></tr> <form name="myForm" onsubmit="return calc(this);"> <tr><td colspan="2"></td><td colspan="3">Длина волос:</td></tr> <tr><td colspan="2"></td><td>длинные<br/><input name="dl" type="radio" checked></td><td>средние<br/><input name="dl" type="radio"</td><td>короткие<br/><input name="dl" type="radio"</td></tr> <tr><td><input type="checkbox" name="color"></td><td>Окраска</td><td><input class="x" type="text" name="d1" value="60000" readonly></td><td><input class="x" type="text" name="s1" value="50000" readonly></td><td><input class="x" type="text" name="k1" value="40000" readonly></td></tr> <tr><td><input type="checkbox" name="cut"></td><td>Стрижка</td><td><input class="x" type="text" name="d2" value="35000" readonly></td><td><input class="x" value="30000" type="text" name="s2" readonly></td><td><input class="x" type="text" name="k2" value="25000" readonly></td></tr> <tr><td><input type="checkbox" name="fler"></td><td>Укладка</td><td><input class="x" type="text" name="d3" value="15000" readonly></td><td><input class="x" value="12000" type="text" name="s3" readonly></td><td><input class="x" type="text" name="k3" value="10000" readonly></td></tr> <tr><td colspan="3" align="center"><input type="button" onclick="calc(this);" value="Рассчитать"></td><td colspan="2"><input type="text" id="itog" name="itog" readonly></td></tr> </form> </table> </body> </html> 0

Калькулятор с radio и checkbox

Решение