0

Есть форма: 1. input type range 2. input type range 3. У каждого input есть output для вывода числового значения 4. Есть еще один output для вывода итогового расчета.

Проблема в том, что в output (4.) выводится значение, которое высчитывается из данных, которые указаны по умолчанию в value инпутов. При движении скролов это значение не меняется, хотя так задумано. JS все считает. Думаю дело в этих value по умолчанию. Подскажите кто-нибудь)

<form class="form" action="">
        <p>Количество желаемых камер, (шт.)</p>
        <input class="camera-count" type="range" min="1" max="16" value="5">
        <output class="output-camera">1</output>
        <p>Размер желаемого архива, (дн.)</p>
        <input class="archive-count" type="range" min="0" max="180" value="0">
        <output class="output-archive">0</output>
        <p>Минимальная стоимость оборудования (бюджетный вариант):</p>
        <output class="equipprices-field">0</output>
    </form>

let cameraPrice = 2690;
let cablePrice = 42;
let powerUnitPrice;
let videoRecorderPrice;
let hddPrice;
let mountingKitPrice;
let equipPricesField = document.querySelector('.equipprices-field');
let cameras = document.querySelector('.camera-count');
let camerasOutput = document.querySelector('.output-camera');
let archive = document.querySelector('.archive-count');
let archiveOutput = document.querySelector('.output-archive');

//__________________________________________________________________________________________________________________

// Привязка значения из инпута в поле для вывода

cameras.addEventListener("input", function () {
    camerasOutput.value = cameras.value;
});

archive.addEventListener("input", function () {
    archiveOutput.value = archive.value;
});

//__________________________________________________________________________________________________________________

// Расчет цены за один жесткий диск

let prodN = cameras.value * archive.value;

if (prodN <= 55.56) {
    hddPrice = 6500;
} else if (prodN > 55.56 && prodN <= 111.11) {
    hddPrice = 8800;
} else if (prodN > 111.11 && prodN <= 166.67) {
    hddPrice = 11000;
} else if (prodN > 166.67 && prodN <= 222.22) {
    hddPrice = 15200;
} else if (prodN > 222.22 && prodN <= 333.33) {
    hddPrice = 20500;
} else if (prodN > 333.33 && prodN <= 444.44) {
    hddPrice = 42000;
} else {
    hddPrice = 0;
};

//_____________________________________________________________________________________________________________________

// Расчет цен за блок питания, видеорегистратор, монтажный комплект

if (cameras.value <= 4) {
    powerUnitPrice = 1000;
    videoRecorderPrice = 4590;
    mountingKitPrice = 2150;
} else if (cameras.value > 4 && cameras.value <= 8) {
    powerUnitPrice = 1500;
    videoRecorderPrice = 5690;
    mountingKitPrice = 3300;
} else {
    powerUnitPrice = 3000;
    videoRecorderPrice = 10800;
    mountingKitPrice = 4500;
};

//_____________________________________________________________________________________________________________________

// Расчет стоимости оборудования и вывод суммы в поле для вывода цены


const camerasPrice = cameras.value * cameraPrice; // Цена за все камеры
const cablesPrice = cameras.value * 10 * cablePrice; // Цена за весь кабель

// Итоговая цена за оборудование
const totalEquipPrices = camerasPrice + cablesPrice + hddPrice + powerUnitPrice + videoRecorderPrice + mountingKitPrice;

equipPricesField.value = totalEquipPrices + ' руб.';

console.log(totalEquipPrices);

//_____________________________________________________________________________________________________________________

1 ответ 1

1

let cameraPrice = 2690;
let cablePrice = 42;
let powerUnitPrice;
let videoRecorderPrice;
let hddPrice;
let mountingKitPrice;
let equipPricesField = document.querySelector('.equipprices-field');
let cameras = document.querySelector('.camera-count');
let camerasOutput = document.querySelector('.output-camera');
let archive = document.querySelector('.archive-count');
let archiveOutput = document.querySelector('.output-archive');

//__________________________________________________________________________________________________________________

// Привязка значения из инпута в поле для вывода

cameras.addEventListener("input", function() {
  camerasOutput.value = cameras.value;
  calculate()
});

archive.addEventListener("input", function() {
  archiveOutput.value = archive.value;
  calculate()
});

//__________________________________________________________________________________________________________________

// Расчет цены за один жесткий диск

function calculate() {

  let prodN = cameras.value * archive.value;

  if (prodN <= 55.56) {
    hddPrice = 6500;
  } else if (prodN > 55.56 && prodN <= 111.11) {
    hddPrice = 8800;
  } else if (prodN > 111.11 && prodN <= 166.67) {
    hddPrice = 11000;
  } else if (prodN > 166.67 && prodN <= 222.22) {
    hddPrice = 15200;
  } else if (prodN > 222.22 && prodN <= 333.33) {
    hddPrice = 20500;
  } else if (prodN > 333.33 && prodN <= 444.44) {
    hddPrice = 42000;
  } else {
    hddPrice = 0;
  };

  //_____________________________________________________________________________________________________________________

  // Расчет цен за блок питания, видеорегистратор, монтажный комплект

  if (cameras.value <= 4) {
    powerUnitPrice = 1000;
    videoRecorderPrice = 4590;
    mountingKitPrice = 2150;
  } else if (cameras.value > 4 && cameras.value <= 8) {
    powerUnitPrice = 1500;
    videoRecorderPrice = 5690;
    mountingKitPrice = 3300;
  } else {
    powerUnitPrice = 3000;
    videoRecorderPrice = 10800;
    mountingKitPrice = 4500;
  };

  //_____________________________________________________________________________________________________________________

  // Расчет стоимости оборудования и вывод суммы в поле для вывода цены


  const camerasPrice = cameras.value * cameraPrice; // Цена за все камеры
  const cablesPrice = cameras.value * 10 * cablePrice; // Цена за весь кабель

  // Итоговая цена за оборудование
  const totalEquipPrices = camerasPrice + cablesPrice + hddPrice + powerUnitPrice + videoRecorderPrice + mountingKitPrice;

  equipPricesField.value = totalEquipPrices + ' руб.';

  console.log(totalEquipPrices);
}
<form class="form" action="">
  <p>Количество желаемых камер, (шт.)</p>
  <input class="camera-count" type="range" min="1" max="16" value="5">
  <output class="output-camera">1</output>
  <p>Размер желаемого архива, (дн.)</p>
  <input class="archive-count" type="range" min="0" max="180" value="0">
  <output class="output-archive">0</output>
  <p>Минимальная стоимость оборудования (бюджетный вариант):</p>
  <output class="equipprices-field">0</output>
</form>

2
  • Благодарю! Все работает
    – user504975
    23 авг 2022 в 12:29
  • В таких случаях галочку на ответе ставят.. :) 23 авг 2022 в 12:37

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки