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

@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

Новые блоги и статьи Все статьи Все блоги /
Валидация и контроль данных табличной части документа перед записью Maks 22.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .	Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .

@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

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

Решение