How to Divide 1 value from input box to 10 another input box divided by 10 without rounding

Question

I am making a form to input Products to warehouse, So, the condition that i want is:

When I type and enter a value in Quantity box (Blue circle), I want that value shown to another 10 input boxes pallet list (red circle), But it has to be 69 Pcs in each box ( 69 is only total that actually fit on the pallet in real warehouse ) and if it still have rest, put the last rest in the last box. This is the illustration that might help :

Say, I have produce 630 PCS items, and when I put 630 to the Quantity Box, It should be shown 69 PCS in every pallet list, 69 until it cannot be divided again. The rest of the divide, have to be placed on the last box.

Example :

Quantity : 630 PCS

Pallet 1: 69

Pallet 2: 69

Pallet 3: 69

Pallet 4: 69

Pallet 5: 69

Pallet 6: 69

Pallet 7: 69

Pallet 8: 69

Pallet 9: 69

Pallet 10: 9 (The rest have to be on the last pallet)

Can someone help me? Thank you, Terima Kasih.

Please add your code. Both HTML and JavaScript. If you have tried something, please post that too and tell what part is not working. — , Sep 15 '18 at 03:40
the code is just bunch of input boxes... nothing special sir. — Sandi Miftah, Sep 15 '18 at 05:07

Pinke Helga · Accepted Answer · 2018-09-15T04:44:33.843

You want the modulo operation and the integer division. The % operator in JavaScript works fine as modulo on positive numbers. You do not need correct modulo operations on negative numbers for this particular problem. The integer division is a floored normal division. The Math object provides a floor method.

var
  byId     = document.getElementById.bind(document),
  intVal   = id => parseInt(byId(id).value),
  onChange = ev =>
  {
    let
      qty  = intVal('quantity'),
      ppb  = intVal('peaces-per-box'),
      rest = qty % ppb,
      html = ''
    ;
    if(!qty || !ppb)
      return byId('pallets').innerHTML = '';

    for (var c = Math.floor(qty / ppb), i = 0; i < c; i++)
      html += `<div></div><lable for="pallet-${i}"></lable> <input id="pallet-${i}" value="${ppb}"></div>\n`;
    if(rest)
      html += `<div></div><lable for="pallet-${i}"></lable> <input id="pallet-${i}" value="${rest}"><div></div>\n`;
    byId('pallets').innerHTML = html;
  }
;
byId('quantity'      ).addEventListener('change', onChange);
byId('peaces-per-box').addEventListener('change', onChange);
onChange();

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Quantities</title>

<body>
  <form>
    <div>
      <lable for="quantity">quantity</lable>
      <input id="quantity" type="number" min="0" step="1" placeholder="enter quantity">
    </div>
    <div>
      <lable for="peaces-per-box">peaces per box</lable>
      <input id="peaces-per-box" type="number" min="1" step="1" placeholder="enter max. peaces per box">
      <div id="pallets">
      </div>
    </div>
  </form>

what should i do if i wont add the new box sir?i mean box should be there in first place — Sandi Miftah, Sep 15 '18 at 05:28
You could set the values of existing boxes for example. Just be creative. It's up to you how you design your UI. — Pinke Helga, Sep 15 '18 at 05:43
thanks sir, i have found another trick to make the inbox <= 10. So much appreciate thanks. — Sandi Miftah, Sep 15 '18 at 06:27
You should read more about DOM manipulation if you want to preserve contents of the generated input boxes. But this is not part of the question. You can use `Math.max(10, Math.floor(qty / ppb))` to get the count of full boxes but not more than 10. Then you need an additional condition to prevent a new box for the rest peaces. — Pinke Helga, Sep 15 '18 at 12:49

score 0 · Answer 2 · answered Sep 15 '18 at 03:42

0

let input = 630
let arr = []
for(let i=0;i<9;i++){
    arr.push(0)
    if(input>=69){
        arr.push(69)
        input-=69
    }
}
arr.push(input)

I don't know if this is what you want.

answered Sep 15 '18 at 03:42

Laziji

83
3

How to Divide 1 value from input box to 10 another input box divided by 10 without rounding

2 Answers2