0
256
ViewsAdding and removing inputs with ratios and recounting them
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 class="adder">Create input</button>
<div class="inputs"></div>
adding inputs:
var component = document.createElement('div');
component.className = "component";
component.innerHTML = '<img class="delete" src="../images/icons/delete_component.svg" alt="Delete Component"><input class="ratio fresh" type="number" placeholder="'+ratio+'" name="ratio[]" value="'+ratio+'"><p class="percentage">%</p>'
inputs.appendChild(component);
2 answers
Answer question0
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" class="fresh"><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 class="container"></div>0
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 class="delete" src="../images/icons/delete_component.svg" alt="Delete Component">' +
'<input id="i' + num + '" class="ratio fresh" type="number" placeholder="0" name="ratio[]" ' +
'value="0" onchange="update(' + num + ')"><span class="percentage">%</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 class="adder" onclick="add()" type="button">Create input</button>
<div class="inputs"></div>