1

Доброго времени суток, только начал знакомство с javascript, делаю калькулятор, возникла такая сложность.

1) Есть select с видами материала(сталь,медь,титан,латунь)

<select id="material">
<option value="steelblack">Чёрная сталь</option>>
<option value="med">Медь</option>
<option value="titan">Титан</option>
<option value="lat">Латунь</option>
.........
</select>

2) Есть поле Input'ов для ввода значений

<label>
<div style="position: relative;">
Укажите длину (мм): <input type="text" id="b" value="0" />
Укажите ширину (мм):<input type="text" id="a" value="0" />
Укажите толщину (мм): <input type="text" name="h" id="h" value="0"  />
Укажите кол-во отверстий: <input type="text" id="hole" value="0">
Укажите длину реза (мм): <input type="text" id="cut" value="0">
Укажите кол-во гибов: <input type="text" id="gib" value="0"></br>
Укажите длину сварки (мм): <input type="text" id="svarka" value="0">
Укажите кол-во деталей: <input type="text" id="detail" value="0">
</label>

3) вывод информации на странице

    <div id="S"></div>
    <div id="S1"></div>
    <div id="m"></div>
    <div id="value"></div>
    <div id="t1"></div>
    <div id="price"></div>
<button onClick="calculate();">Рассчитать стоимость</button>

4) js файл

function calculate() {
    var material = document.getElementById('material').value;
    switch (material) {
        case "steelblack":
          cost = 51;  //стоимость железа, нужна для расчёта стоимости металла
          p = 7800   //плотность железа так же нужна для расчёта стоимости металла
          break
          case "steelos":
          cost = 66;
          p = 7800
          break
.......
    }
    var a  = document.getElementById('a').value;
    var b  = document.getElementById('b').value;
    var h  = document.getElementById('h').value;
    var hole  = document.getElementById('hole').value;
    var cut  = document.getElementById('cut').value;
    var gib  = document.getElementById('gib').value;
    var svarka  = document.getElementById('svarka').value;
    var detail = document.getElementById('detail').value;

    //подсчёты и вывод результатов
    var S = (a * b).toFixed(2);
    document.getElementById('S').innerHTML = "Площадь детали: "+ S +" мм2.";
    var S1 = (parseFloat (a) + parseFloat (b))*2;
    document.getElementById('S1').innerHTML = "Периметр: "+ S1 +" мм.";
    var v = parseFloat (S)* parseFloat (h);
    var m = (parseFloat (p)* parseFloat (v) /1000000000).toFixed(2);
    document.getElementById('m').innerHTML = "Масса: "+ m +" кг";
    var value = (parseFloat (m)* parseFloat (cost)).toFixed(2);
    document.getElementById('value').innerHTML = "Стоимость металла: "+ value +" р.";
    var hole = parseFloat (hole)*10;
    document.getElementById('hole').innerHTML = "Стоимость дырок: "+ hole +" р.";
    var cut = parseFloat ((cut)*50)/1000;
    document.getElementById('cut').innerHTML = "Стоимость реза: "+ cut +" р.";
    var svarka = parseFloat ((svarka)*60)/1000;
    document.getElementById('svarka').innerHTML = "Стоимость сварки: "+ svarka +" р.";
    var gib = parseFloat (gib)*30;
    document.getElementById('gib').innerHTML = "Стоимость гибов: "+ gib +" р.";
    var t1 = (parseFloat (value)+ parseFloat (hole)+ parseFloat (cut)+ parseFloat (gib)+ parseFloat (svarka)).toFixed(2);
    document.getElementById('t1').innerHTML = "Общая стоимость одной детали: "+ t1 +" р.";
    var price = (t1 * detail).toFixed(2);
    document.getElementById('price').innerHTML = "Стоимость нескольких деталей: "+ price +" р.";
    }
    }

Сейчас цена на резку общая и считается так

var cutp = parseFloat ((cut)*50)/1000;

то есть просто берётся значение из input'a умножается на 50 и делиться на 1000

Задача стоит такая, необходимо сделать так чтобы менялось значение цены резки при выборе определённого металла и толщины этого металла

Необходимо следующие, когда выбирается металл (в массиве material) и указывается его толщина (в инпуте h) и исходя из этих данных автоматический выставляется цена для резки (инпут cut), ценники как я думаю можно забить в массив как пример

var cutPr
    switch (CutPr) {
        case "steel-05":
          Price = 3.80;
          thicknes = 0.5
          break

          case "steel-07":
          Price = 4.45;
          thicknes = 0.7
          break

грубо говоря, я выбираю медь(med), выставляю толщину(h) 1мм, у меня берётся цена за резку(cut) металла 3.80руб, в input'e cut вводится длина резки допустим 750мм, тут то и происходит расчёт 3.80/1000*cut = 2.85р за 750мм резки.

значение cut, должно браться из массива, исходя от выбранного металла в селекте и выставленного значения толщины

2
  • а проблема то в чем состоит? что-то не работает, или вы что-то не понимаете? что именно?
    – teran
    4 апр 2018 в 5:48
  • не понимаю как вообще это реализовать, чтобы при выборе материала и выставление толщины менялся ценник на резку
    – st1mset
    4 апр 2018 в 6:04

2 ответа 2

1

Необходимо повесить событие onchange на input и select:

<select id="material" onchange={yourFunc()}>
........
<input type="text" name="h" id="h" value="0" onchange={yourFunc()} />

Создаете в DOM дереве элемент чтобы выводить результат, например:

<p id="result"></p>

И создать функцию для подсчета цены:

function yourFunc() {
    // Берем значение из select
    var material = document.getElementById('material').value
    // Берем значение из input
    var input = document.getElementById('h').value
    var cost, p
    switch (material) {
       case "steelblack":
          cost = 51;
          p = 7800
          break
       ...
    }

    // На этом этапе у вас есть толщина, стоимость и плотность металла
    // Тут делаете какие то операции
    var result = ...
    document.getElementById('result').innerHTML = result
}

Если нужно чтобы при загрузке уже цена отображалась, то добавьте во внутрь тега script

document.addEventListener("DOMContentLoaded", yourFunc);
5
  • попробовал совместить ваше со своим и всё уходит в ошибку NaN, так же как я понимаю у вас расчёт идёт из cost, а мне нужно чтобы расчёт производился совершенно с другого блока, допустим сделать переменную var cutprice и туда case sb0.5 = 12; sb0.7 = 16, то есть нужно чтобы был определён какой метал выбран и какая толщина и исходя из этих данный с другого места бралась цена для расчёта стоимости резки
    – st1mset
    4 апр 2018 в 8:56
  • @st1mset этого не было в условии:) сделайте какой нибудь массив с объектами: var costs = [{'0.5' : 12}, {'0.7': 16}, ...]. У вас есть значение инпута: var input = document.getElementById('h').value. Можете получить цену: costs[input], где input это толщина. 4 апр 2018 в 9:03
  • да я просто выразился не правильно изначально, попробую сейчас разобраться с той информацией что вы мне дали)
    – st1mset
    4 апр 2018 в 9:10
  • А не подскажите еще как разделить цены можно? типов материала много и разный ценник на резку у них, делать под каждый свой массив?
    – st1mset
    4 апр 2018 в 9:42
  • Думаю да, какого то универсального способа не вижу к сожалению:( 4 апр 2018 в 9:52
1

const MATERIALS = {
  steelblack: { cost: 51, p: 7800 }, 
  steelos   : { cost: 66, p: 7800 }, 
  med       : { cost: 23.2, p: 0 }, 
  titan     : { cost: 93, p: 0 }, 
  lat       : { cost: 33, p: 0 }
}; 
const H_VALUES = [0.5, 0.7, 0.9, 1, 1.2, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10, 12, 15, 20, 22, 24, 25, 26, 28, 30]; 

var $d = document, 
    frmEl, hvEl, rsltEl; 

$d.addEventListener('DOMContentLoaded', () => {
  frmEl  = $d.forms.calc; 
  hvEl   = $d.getElementById('hv'); 
  rsltEl = $d.getElementById('result'); 
  frmEl.h.addEventListener('input', function () {
    hvEl.textContent = H_VALUES[this.value]; 
  }); 
  let ctrls = $d.querySelectorAll('#calc select, #calc input'); 
  for (let ctrl of ctrls)
    ctrl.addEventListener('input', calculate); 
  calculate(); 
});

function calculate() {
  let mt = MATERIALS[frmEl.material.value]; 
  if (!mt) {
    rsltEl.textContent = 'Нет данных о материале';
    return; 
  }
  let w = frmEl.w.value, 
      h = +hvEl.textContent, 
      cutPrice = frmEl.price.value;
  // типа формула подсчета
  let result = w * h / 1000 * cutPrice; 
  rsltEl.textContent = (result.toFixed(2) + '₽').replace('.', ','); 
}
* { font: 16px sans-serif; }
body { width: 450px; }

#calc     { line-height: 2.0em; }
#material { width: 320px; }

input {
  vertical-align: middle; 
  width: 200px; 
}
<form id="calc" name="calc">
  Материал: <select id="material" name="material">
    <option value="steelblack">Чёрная сталь</option>
    <option value="med">Медь</option>
    <option value="titan">Титан</option>
    <option value="lat">Латунь</option>
    <option value="palych">Василий Палыч</option>
  </select><br>
  Укажите толщину (мм): <input type="range" name="h" id="h" max="22" value="0"><span id="hv">0.5</span><br>
  Укажите длину реза (мм): <input type="text" name="w" id="w" value="1000"><br>
  Цена резки: <input type="number" name="price" min="0" value="23.2">
  <hr>
  <span id="result"></span>
</form>

9
  • Выше вот писал комментарий: как же как я понимаю у вас расчёт идёт из cost, а мне нужно чтобы расчёт производился совершенно с другого блока, допустим сделать переменную var cutprice и туда case sb0.5 = 12; sb0.7 = 16, то есть нужно чтобы был определён какой метал выбран и какая толщина и исходя из этих данный с другого места бралась цена для расчёта стоимости резки
    – st1mset
    4 апр 2018 в 10:47
  • @st1mset, «мне нужно чтобы расчёт производился совершенно с другого блока» - этого не было в вопросе. Приведите ваш вопрос в более понятную форму: что имеется; что необходимо; какие трудности возникли - в четком и последовательном виде.
    – yar85
    4 апр 2018 в 11:53
  • так я вроде обновил вопрос, или этой информации не достаточно?
    – st1mset
    4 апр 2018 в 11:54
  • 1
    Сейчас отсутствует HTML как минимум некоторых эл-тов (а то что есть, разбросано по тексту), нет формулы расчета, и т.д.. Прочтя комменты, вижу что на все ваши вопросы уже отвечено, и если надеетесь плюсом получить готовое решение под свои условия - пожалуйста, прикрепите работающий (тут, а не где-то еще) краткий пример кода с последовательным и емким описанием задачи его "допила" до желаемого. Это повысит шансы. Вы же не думаете что кому-то интересно возиться с "заказами", внося правку за правкой?..
    – yar85
    4 апр 2018 в 12:28
  • Относительно того как получить значение цены из блока, в общих чертах: выбираете элемент блока из DOM; затем через свойство textContent получаете текстовое содержимое; (опционально - выполняете поиск подстроки); и приводите значение к числовому типу, например как +varName. Остальные значения для подсчета - в примере они и так берутся из элементов страницы.
    – yar85
    4 апр 2018 в 12:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.