Adding and removing inputs with ratios and recounting them-CodePudding

I'm trying to make a simple website, wehre you have a button and every time you hit the button, an input is created. You can also get rid of the input (deleting it) with a cross next to it (button and cross [adding and removing elements] are not a subject of this question, so they are not shown on screenshot).

Now the inputs hold a percentage value that you can change. By default, if you have one input, it's value is 100, when having 4 inputs, value is 25 and so on... When adding a new input all the inputs not edited manually (we'll ge to it) should recound correspondingly. You can change the input value (any of them) to set a percentage, which remains the same. Think of it like a "chance". If one input is 50, the others (for example other 2 inputs) should have a percentage of 25 each (since you have 50 set, 50 is remaining, so you divide it between those inputs).

You can set multiple fixed values and it would always recount. You can delete an input (edited or not) and it should recount the rest (but not other edited ones).

Example:

You have 5 inputs, you edited 1. and 2. one with values 40 and 30. So you have 30 (%) left. It gets divided between the rest 3 inputs with 10 (%) each.

My approach:

var inputs = document.querySelector(".ratio:not(.fresh)"); //.ratio is class of the inputs and .fresh is a class that all inputs have when created, but loose when edited
    var sum = 0; //sum of the edited inputs
    $(inputs).each(function(){
        sum  =  $(this).val();
    });

    var summary = 100 - sum; //Summary is the remaining value that is to be divided between the not edited inputs
    ratio = summary/($(".fresh").length 1); //ratio is the new value of .ratio input and is created when dividing Summary by all un-edited elements
    $(".fresh").val(ratio);

But honestly it should be in a function, since you should just call to recount it when adding/deleting. And it does not work properly (it does, but not with more than 1 edited input). And I'm stuck with it.

Any help? Thanks!

EDIT:

Adding more code snippets:

structure:

<button >Create input</button>
<div ></div>

adding inputs:

var component = document.createElement('div');
component.className = "component";
component.innerHTML = '<img  src="../images/icons/delete_component.svg" alt="Delete Component"><input  type="number" placeholder="' ratio '" name="ratio[]" value="' ratio '"><p >%</p>'

inputs.appendChild(component);

CodePudding user response：

Here is a Vanilla JS solution. I hope I understood your requirements properly.

function recalc(){
const inps=[...cont.querySelectorAll("input")].reduce((a,c)=>{
  if(!c.classList.contains("fresh")) a.sum= c.value (a.sum||0);
  else a.push(c);
  return a;
 }, []);
 const v=(100-(inps.sum||0))/inps.length;
 inps.forEach(inp=>inp.value=v);
}
const cont=document.querySelector("div");
 
document.querySelector("button").onclick=ev=>{
 const div=document.createElement("div");
 div.innerHTML=`<input type="number" ><button> x </button>`;
 cont.append(div);
 recalc();
} 
cont.onclick=ev=>{
 if (ev.target.tagName=="BUTTON"){
  ev.target.closest("div").remove();
  recalc()
 }
}
cont.addEventListener("input",ev=>{
  ev.target.classList.remove("fresh");
 recalc();
})

<button>   </button>
<div ></div>

CodePudding user response：

var inputsContainer = document.querySelector(".inputs");
var inputs = Array.from(inputsContainer.querySelectorAll("input"));
var inputsTouched = new Array(inputs.length).fill(false);

function add() {
  var num = inputs.length;
  var component = document.createElement("div");
  component.className = "component";
  component.innerHTML =
    '<img  src="../images/icons/delete_component.svg" alt="Delete Component">'  
    '<input id="i'   num   '"  type="number" placeholder="0" name="ratio[]" '  
    'value="0" onchange="update('   num   ')"><span >%</span>';

  inputsContainer.appendChild(component);
  inputsTouched.push(false);
  inputs = Array.from(inputsContainer.querySelectorAll("input"));

  reevaluate();
}

function reevaluate() {
  var touched = inputs.filter((el, i) => inputsTouched[i]);
  var notTouched = inputs.filter((el, i) => !inputsTouched[i]);

  var sum = touched.reduce((prev, curr) => prev    curr.value, 0);
  var ratio = (100 - sum) / notTouched.length;

  if (ratio < 0.0001) {
    ratio = 0
  }

  notTouched.forEach(el => el.value = ratio);
}

function update(num) {
  inputsTouched[num] = true;
}

<button  onclick="add()" type="button">Create input</button>
<div ></div>