Как сделать калькулятор стоимости?

Question

[Алексей Орлов]

Только изучаю Javascript, сейчас решил сделать калькулятор стоимости услуг.
Сейчас только при изменение одного value в инпуте сразу же меняется стоимость (использую oninput). Как этот метод (или как-то по другому) распространить на оба inputa с разными id, при этом, чтобы значения складывались?

Код на jsfiddle.

Answer 1

[Alexander Pushkarev]

Как вариант https://jsfiddle.net/3qmxg5z7/ но можно написать лучше

Comments

[Алексей Орлов]

Alexander Pushkarev а что добавить , если не только type number , но ещё нужно чтобы добавлялся value при input:checked

Answer 2

[0xD34F]

Делаете общую функцию пересчёта суммы, где обходите все элементы. Обработку события input делегируете.

const BASE_PRICE = 2650;
const ITEM_PRICE = 350;

function calc() {
  const price = Array.prototype.reduce.call(
    document.querySelectorAll('.field-item__input input'),
    (acc, n) => acc + n.value * ITEM_PRICE,
    BASE_PRICE
  );

  document.querySelector('#result').innerText = `${price} руб.`;
}

document.querySelector('.form-fields__items').addEventListener('input', calc);
calc();

Answer 3

[Bhudh]

Как-то вот так: https://jsfiddle.net/76ksr1fm/19/
Значения, которые могут поменяться (цены), лучше вынести в отдельные переменные, функцию-апдейтер тоже объявить отдельно, и не присваивать on-свойства — это вчерашний век.

Comments

[Bhudh]

Ещё хотелось бы сделать замечание по поводу вот такого кода:
var result = document.getElementById('result');
Господа, ни к чему присваивать это переменной, если у DOM-элемента есть id, он уже есть в глобальной области видимости и к нему можно обращаться просто по id или, если id невалиден как имя переменной, через window[id].
Проверьте, у всех ли работает вот этот код: https://jsfiddle.net/76ksr1fm/27 ?
В нём только одна переменная: объект цен.