Нужно допилить или перепилить(форма- ввод, расчет и вывод результата)

@AspRev · Регистрация: 13.02.2017

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

Нужно чтобы результат расчетов выводился автоматически.p/s/ голова бо бо, а мозга запустить на странице даже этот простой вариант через клик - не хватает.
calculator.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function sum() {
    var s1 = parseInt(document.getElementById("a").value);
    var s2 = parseInt(document.getElementById("b").value);
    var s3 = parseInt(document.getElementById("c").value);
    var s4 = parseInt(document.getElementById("d").value);
    var s5 = parseInt(document.getElementById("e").value);
    var s6 = parseInt(document.getElementById("f").value);
    var s7 = parseInt(document.getElementById("g").value);
    var s8 = (a * 1000) + (b * 150);
    if (s2 <= 4)
        s9 = s1 * 1000 + s3 * 50 + s4 * 50 + s5 * 100 + s6 * 150 + s7 * 150;
    else
        s9 = s8 + s3 * 50 + s4 * 50 + s5 * 100 + s6 * 150 + s7 * 150;
    var rez = document.getElementById("rez").innerText = s9;
}
 
document.getElementById("go").onclick = function () {
    sum();
}

index.html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
   <form class="calc">
            <div id="kalk">
                    <input type="text" id="a" size="10"><br />
                    <input type="text" id="b" size="10"><br />
                    <input type="text" id="c" size="10"><br />
                    <input type="text" id="d" size="10"><br />
                    <input type="text" id="e" size="10"><br />
                    <input type="text" id="f" size="10"><br />
                    <input type="text" id="g" size="10"><br />
                    <button id="go">Результат</button>
                    <div id="rez"></div> <!--//ответ -->
                </div>
             </form>

template.css

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
@import url('https://fonts.googleapis.com/css?family=Kurale');
.calc {
position:absolute;
top:30%;
right:15%;
}
 
.calc #kalk div input[type=text]{
padding:6px 10px;
border-radius:10px;
border:5px solid #D9470D;
    }
 
    .calc #kalk div input[type=button] {
padding:10px 10px;
        border-radius:50%;
        font-size:16px;
        border:10px solid #D9470D;
        cursor:pointer;
    }
 
div {
    margin:10px 0;
    text-align:center;
}
 
    div label {
        margin:0 10px 0 0;
    }
    button{
padding:10px 10px;
        border-radius:50%;
        font-size:16px;
        border:10px solid #D9470D;
        cursor:pointer;
    }
    #rez{
        background-color:#D9470D;
        padding:20px 20px;
border-radius:10px;
border:5px solid #D9470D;
    }

@Sorcessers · 03.10.2018, 17:00

Последние три строчки поменял.

Только там нужно проверку добавить чтобы NAN не выскакивал.
Или если все поля заполнены, или если результат = NAN то не выводить, смотря что нужно Вам.

JavaScript
1
2
3
document.getElementById("kalk").onchange = function () {
sum();
}

Добавлено через 37 минут
Вместо onchange, лучше oninput будет.

@AspRev · 03.10.2018, 17:48 **[ТС]**

ну по идее там нужно вводить количество, в скрипте количество умножается на рубли, сразу же отображается в "итоге" потом если в следующей строчке ввели количество штук то вторая строчка приплюсовывается к первой и .тд. 7 строк. Сложность расчета в том что если во второй строке меньше либо равно 4, то расчеты немного изменяются, ну и методов я не знаю блин

Добавлено через 7 минут
Вообщем теперь по существу: Если значение во второй строке <=4,то считаем так s1 * 1000 + s3 * 50 + s4 * 50 + s5 * 100 + s6 * 150 + s7 * 150; если больше 4 то считаем так(нашел опечатку у себя) s1 * 1000 + s2 * 150+s3 * 50 + s4 * 50 + s5 * 100 + s6 * 150 + s7 * 150; суть скрипта вводишь первая строка например 5 у тебя в итоге сразу отображается s1*1000= 5000, потом вводишь вторую строку например 10 в итоге сразу плюсуется s2*150(т.к. >4) = 1500 и Итого 6500. я хотел сделать без кнопки "рассчитать" чтобы автоматом

Добавлено через 4 минуты
переделал последние три строчки нажимаю "Результат" и страница просто обновляется

ну вообщем то ничего не поменялось

Qwerty_Wasd · 03.10.2018, 18:36

AspRev, например так - https://codepen.io/qwerty_wasd/pen/rqxRYP
Кстати, обратите внимание на изменения в разметке(убрал кнопку - лишняя).
Также делается проверка на число, если это не число или пустая строка, значением будет ноль. То есть в уравнении участвовать не будет.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<form class="calc">
  <div id="kalk">
    <input id="a" type="text" size="10"/><br/>
    <input id="b" type="text" size="10"/><br/>
    <input id="c" type="text" size="10"/><br/>
    <input id="d" type="text" size="10"/><br/>
    <input id="e" type="text" size="10"/><br/>
    <input id="f" type="text" size="10"/><br/>
    <input id="g" type="text" size="10"/>
    <div id="rez"></div>
    <!-- //ответ-->
  </div>
</form>

JavaScript
1
2
3
4
5
6
7
let inpts = document.querySelectorAll('#kalk > input'),
    result = document.getElementById('rez');
document.forms[0].addEventListener('input', e => {
  //result.textContent
  let arr = [...inpts].map(e => e.value).map(e => e === '' || !(!isNaN(parseFloat(e)) && isFinite(e)) ? 0 : Number(e));
  result.textContent = (arr[1]<=4) ? arr[0] * 1000 + arr[2] * 50 + arr[3] * 50 + arr[4] * 100 + arr[5] * 150 + arr[6] * 150 : arr[0] * 1000 + arr[1] * 150 + arr[2] * 50 + arr[3] * 50 + arr[4] * 100 + arr[5] * 150 + arr[6] * 150;
});

@AspRev · 03.10.2018, 18:45 **[ТС]**

я тоже хочу научится так писать java код блин все мои познания заканчиваются там, где начинаются массивы и оскорбительные потому что не знакомые методы Ж))

Qwerty_Wasd · 03.10.2018, 18:48

AspRev, и кто Вам мешает продвинутся дальше массивов?

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

java код

JAVASCRIPT код

@AspRev · 03.10.2018, 19:16 **[ТС]**

примерно 10 лет назад я начинал изучать java тогда еще не знал что именно делаю но скрипты и бинды уже прописывал, потом не до того стало, пока то да се, сейчас встала задача сделать сайт для сауны, а также для магазина рыбного, только достроил -нужно запускать. Решил сам сайты написать, неделю назад ткнулся в это и понял, что че то я подзабыл основательно Ж))). Меня больше всего интересует, не как что делать, а где информацию о том как и что делать смотреть, типа справочники по джаве. чтобы удобно вспоминать было. Подскажите? Какие ресурсы смотреть во время написания кода как подсказка?

@Mr_Sergo · 03.10.2018, 19:45

AspRev,

Как вариант

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<form class="calc">
    <div id="kalk">
        <input type="text" class="val" size="10"><br />
        <input type="text" class="val" size="10"><br />
        <input type="text" class="val" size="10"><br />
        <input type="text" class="val" size="10"><br />
        <input type="text" class="val" size="10"><br />
        <input type="text" class="val" size="10"><br />
        <input type="text" class="val" size="10"><br />
        <div id="rez"></div>
    </div>
</form>

JavaScript
1
2
3
4
5
6
document.forms[0].addEventListener('input',()=> {
    let val = x => {let v = document.querySelectorAll('.val')[x].value; return +v ? +v : 0;}, res = 0;
    val(1) <= 4 ? res = val(0)*1000 + val(2)*50 + val(3)*50 + val(4)*100 + val(5)*150 + val(6)*150 :
    res = val(0)*1000 + val(1)*150 + val(2)*50 + val(3)*50 + val(4)*100 + val(5)*150 + val(6)*150;
    document.getElementById("rez").innerText = res;
});

Добавлено через 11 минут

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

Какие ресурсы смотреть

Неплохой сайт

Добавлено через 49 секунд
Тоже не плох

Qwerty_Wasd · 03.10.2018, 19:48

AspRev,

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

java

JAVASCRIPT!!! Java и Javascript - два абсолютно разных языка.

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

Какие ресурсы смотреть во время написания кода как подсказка?

https://developer.mozilla.org/... JavaScript

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@AspRev 0 / 0 / 0 Регистрация: 13.02.2017 Сообщений: 15
	03.10.2018, 17:48 [ТС]
	ну по идее там нужно вводить количество, в скрипте количество умножается на рубли, сразу же отображается в "итоге" потом если в следующей строчке ввели количество штук то вторая строчка приплюсовывается к первой и .тд. 7 строк. Сложность расчета в том что если во второй строке меньше либо равно 4, то расчеты немного изменяются, ну и методов я не знаю блин Добавлено через 7 минут Вообщем теперь по существу: Если значение во второй строке <=4,то считаем так s1 * 1000 + s3 * 50 + s4 * 50 + s5 * 100 + s6 * 150 + s7 * 150; если больше 4 то считаем так(нашел опечатку у себя) s1 * 1000 + s2 * 150+s3 * 50 + s4 * 50 + s5 * 100 + s6 * 150 + s7 * 150; суть скрипта вводишь первая строка например 5 у тебя в итоге сразу отображается s11000= 5000, потом вводишь вторую строку например 10 в итоге сразу плюсуется s2150(т.к. >4) = 1500 и Итого 6500. я хотел сделать без кнопки "рассчитать" чтобы автоматом Добавлено через 4 минуты переделал последние три строчки нажимаю "Результат" и страница просто обновляется ну вообщем то ничего не поменялось 0

@AspRev 0 / 0 / 0 Регистрация: 13.02.2017 Сообщений: 15
	03.10.2018, 18:45 [ТС]
	я тоже хочу научится так писать java код блин все мои познания заканчиваются там, где начинаются массивы и оскорбительные потому что не знакомые методы Ж)) 0

@AspRev 0 / 0 / 0 Регистрация: 13.02.2017 Сообщений: 15
	03.10.2018, 19:16 [ТС]
	примерно 10 лет назад я начинал изучать java тогда еще не знал что именно делаю но скрипты и бинды уже прописывал, потом не до того стало, пока то да се, сейчас встала задача сделать сайт для сауны, а также для магазина рыбного, только достроил -нужно запускать. Решил сам сайты написать, неделю назад ткнулся в это и понял, что че то я подзабыл основательно Ж))). Меня больше всего интересует, не как что делать, а где информацию о том как и что делать смотреть, типа справочники по джаве. чтобы удобно вспоминать было. Подскажите? Какие ресурсы смотреть во время написания кода как подсказка? 0

Нужно допилить или перепилить(форма- ввод, расчет и вывод результата)

Решение