Расчет стоимости используя JS и input=range

@karkomak · Регистрация: 18.11.2015

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

Доброго дня уважаемые форумчане!
Не силен в JS, но стоит задача скромного и простого калькулятора на сайт с использованием ползунков input=range
Макет того, как должно все выглядеть прикладываю:

Расчет стоимости используя JS и input=range

Два самых основных момента:
1) чтобы счетчик дней и часов был отрисован в ползунке
2) чтобы общее количество денег считалось по формуле: кол-во дней*кол-во часов*100

Своей головы не хватает, если сможете помочь с комментариями к скрипту, буду очень благодарен! Хочу понимать, как вся система работает! Большое спасибо заранее

Что у меня есть на текущий момент?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form class="courier__calc">
    <label for="hours">Hours per day: <span id="hoursValue">1</span></label>
    <input type="range" id="hours" class="calc__range" name="hours" min="1" max="12" value="1" step="1" onchange="hoursValue(this.value);">
    <output for="hours" onforminput="value = hours.valueAsNumber;"></output>
    <label for="days">Days per week: <span id="daysValue">1</span></label>
    <input type="range" id="days" class="calc__range" name="days" min="1" max="7" value="1" step="1" onchange="daysValue(this.value);">
    <div class="result__wrap">
        <div class="">
            <div class="result__count">₹ 1000</div>
            <div class="result__info">Possible income</div>
        </div>
        <div class="tips__wrap">
            <div class="tips__title">Tips</div>
            <div class="tips__info">Keep 100% of all your tips</div>
        </div>
        <div class="tips__wrap">
            <div class="tips__title">Tips</div>
            <div class="tips__info">Keep 100% of all your tips</div>
        </div>
    </div>
</form>

CSS
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
.courier__calc {
    display: flex;
    flex-direction: column;
    max-width: 830px;
    margin: 0 auto;
}
.courier__calc label {
    margin-top: 40px;
    padding-bottom: 32px;
    color: #2D2928;
    font-family: inherit;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 0;
}
input[type="range"] {
    width: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
}
input[type="range"]::-moz-range-track {
    height: 24px;
    background-color: #E8E8E8;
    border: none;
    border-radius: 48px;
}
input[type="range"]::-moz-range-thumb {
    width: 56px;
    height: 56px;
    background-color: #fff;
    box-shadow: 0 1px 15px #E8E8E8;
    border: none;
    border-radius: 100px;
}
input[type="range"]::-moz-range-progress {
    height: 24px;
    background-color: #0048FF;
    border-radius: 48px;
}
.result__wrap {
    display:  flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 56px;
    padding: 50px;
    width: inherit;
    height:  auto;
    background: #F4F4F4;
    border-radius: 40px;
}
.result__count {
    color: #2D2928;
    font-family: inherit;
    font-size:  48px;
    font-weight: 700;
    line-height: 60px;
    letter-spacing: 0;
}
.result__info {
    color: #969493;
    font-family: inherit;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0;
}
.tips__wrap {
    padding: 12px 20px;
    background: #fff;
    border-radius: 24px;
}
.tips__title {
    position: relative;
    padding-left: 32px;
    font-family: inherit;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 0;
}
.tips__title:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 26px;
    height: 26px;
    border-radius: 100px;
    background: #2D2928;
}
.tips__info {
    color: #969493;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0;
}

JavaScript
1
2
3
4
5
6
function hoursValue(val) {
    document.getElementById('hoursValue').innerHTML=val;
}
function daysValue(val) {
    document.getElementById('daysValue').innerHTML=val;
}

@karkomak · 27.05.2022, 12:03 **[ТС]**

Уважаемые программисты, нет идей, как мне можно помочь? ):

@DrType · 27.05.2022, 12:38

По второму моменту:

JavaScript
1
2
3
4
5
6
7
8
9
10
const form = document.forms[0],
  daysInput = form.days,
  hoursInput = form.hours,
  resultOutput = document.querySelector(".result__count");
function main() {
  const days = +daysInput.value,
    hours = +hoursInput.value;
  resultOutput.textContent = `₹ ${days * hours * 100}`;
}
form.addEventListener("input", main);

Инлайн-обработчики (атрибуты onchange) уберите.

@karkomak · 27.05.2022, 14:23 **[ТС]**

Большое спасибо!
Убрал onchange добавил Ваш скрипт, почему-то не отрабатывает
Он должен менять строку

HTML5
1
<div class="result__count">₹ 1000</div>

же?

@Padonak · 27.05.2022, 14:30

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

почему-то не отрабатывает

А у вас одна форма на странице или больше?

@karkomak · 27.05.2022, 15:16 **[ТС]**

Одна, больше нет
Скрипт добавил, как он есть, как вы мне прислали и почему-то не считает ничего

Добавлено через 3 минуты
Проблема явно где-то на моей стороне, в codepen все работает с Вашим скриптом, пошел разбираться

@Padonak · 27.05.2022, 15:23

karkomak, скрипт должен сработать после загрузки страницы, DrType надеялся, что вы это понимаете. Проверьте этот момент и всегда заглядывайте в консоль в случае неправильного поведения кода - там очень часто можно найти ответы

@karkomak · 27.05.2022, 15:29 **[ТС]**

Мне намекнули, что forms[0] - не верное решение, я весьма слаб во всем этом

@Padonak · 27.05.2022, 18:01

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

не верное решение

Хз, по-моему, всё отлично работает...

PHP/HTML
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>123</title>
    <style>
    .courier__calc {
    display: flex;
    flex-direction: column;
    max-width: 830px;
    margin: 0 auto;
}
.courier__calc label {
    margin-top: 40px;
    padding-bottom: 32px;
    color: #2D2928;
    font-family: inherit;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 0;
}
input[type="range"] {
    width: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
}
input[type="range"]::-moz-range-track {
    height: 24px;
    background-color: #E8E8E8;
    border: none;
    border-radius: 48px;
}
input[type="range"]::-moz-range-thumb {
    width: 56px;
    height: 56px;
    background-color: #fff;
    box-shadow: 0 1px 15px #E8E8E8;
    border: none;
    border-radius: 100px;
}
input[type="range"]::-moz-range-progress {
    height: 24px;
    background-color: #0048FF;
    border-radius: 48px;
}
.result__wrap {
    display:  flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 56px;
    padding: 50px;
    width: inherit;
    height:  auto;
    background: #F4F4F4;
    border-radius: 40px;
}
.result__count {
    color: #2D2928;
    font-family: inherit;
    font-size:  48px;
    font-weight: 700;
    line-height: 60px;
    letter-spacing: 0;
}
.result__info {
    color: #969493;
    font-family: inherit;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0;
}
.tips__wrap {
    padding: 12px 20px;
    background: #fff;
    border-radius: 24px;
}
.tips__title {
    position: relative;
    padding-left: 32px;
    font-family: inherit;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 0;
}
.tips__title:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 26px;
    height: 26px;
    border-radius: 100px;
    background: #2D2928;
}
.tips__info {
    color: #969493;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0;
}
    </style>
   <script>
onload = function(){
 
const form = document.forms[0],
  daysInput = form.days,
  hoursInput = form.hours,
  resultOutput = document.querySelector(".result__count");
function main() {
  const days = +daysInput.value,
    hours = +hoursInput.value;
  resultOutput.textContent = `₹ ${days * hours * 100}`;
}
form.addEventListener("input", main);
 
}
   </script>
  </head>
  <body>    
    <form class="courier__calc">
    <label for="hours">Hours per day: <span id="hoursValue">1</span></label>
    <input type="range" id="hours" class="calc__range" name="hours" min="1" max="12" value="1" step="1" />
    <output for="hours" onforminput="value = hours.valueAsNumber;"></output>
    <label for="days">Days per week: <span id="daysValue">1</span></label>
    <input type="range" id="days" class="calc__range" name="days" min="1" max="7" value="1" step="1" />
    <div class="result__wrap">
        <div class="">
            <div class="result__count">₹ 1000</div>
            <div class="result__info">Possible income</div>
        </div>
        <div class="tips__wrap">
            <div class="tips__title">Tips</div>
            <div class="tips__info">Keep 100% of all your tips</div>
        </div>
        <div class="tips__wrap">
            <div class="tips__title">Tips</div>
            <div class="tips__info">Keep 100% of all your tips</div>
        </div>
    </div>
</form>
  </body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .
Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .

@karkomak 1 / 1 / 0 Регистрация: 18.11.2015 Сообщений: 53
	27.05.2022, 12:03 [ТС]
	Уважаемые программисты, нет идей, как мне можно помочь? ): 0

@karkomak 1 / 1 / 0 Регистрация: 18.11.2015 Сообщений: 53
	27.05.2022, 15:16 [ТС]
	Одна, больше нет Скрипт добавил, как он есть, как вы мне прислали и почему-то не считает ничего Добавлено через 3 минуты Проблема явно где-то на моей стороне, в codepen все работает с Вашим скриптом, пошел разбираться 0

@Padonak Философ-разговорник 1066 / 391 / 120 Регистрация: 20.02.2016 Сообщений: 884 Записей в блоге: 1
	27.05.2022, 15:23
	karkomak, скрипт должен сработать после загрузки страницы, DrType надеялся, что вы это понимаете. Проверьте этот момент и всегда заглядывайте в консоль в случае неправильного поведения кода - там очень часто можно найти ответы 1

@karkomak 1 / 1 / 0 Регистрация: 18.11.2015 Сообщений: 53
	27.05.2022, 15:29 [ТС]
	Мне намекнули, что forms[0] - не верное решение, я весьма слаб во всем этом 0