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

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

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

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

Javascript

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

   <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

@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

<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

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

<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

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

@AspRev 0 / 0 / 0 Регистрация: 13.02.2017 Сообщений: 15
	03.10.2018, 17:48 [ТС]	3
	ну по идее там нужно вводить количество, в скрипте количество умножается на рубли, сразу же отображается в "итоге" потом если в следующей строчке ввели количество штук то вторая строчка приплюсовывается к первой и .тд. 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 [ТС]	5
	я тоже хочу научится так писать java код блин все мои познания заканчиваются там, где начинаются массивы и оскорбительные потому что не знакомые методы Ж)) 0

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	03.10.2018, 18:48	6
	AspRev, и кто Вам мешает продвинутся дальше массивов? Сообщение от AspRev java код JAVASCRIPT код 0

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

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	03.10.2018, 19:48	9
	AspRev, Сообщение от AspRev java JAVASCRIPT!!! Java и Javascript - два абсолютно разных языка. Сообщение от AspRev Какие ресурсы смотреть во время написания кода как подсказка? https://developer.mozilla.org/... JavaScript 0

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

Решение