Update all Object key values with the most recent DOM value after user presses a button

Question

Context: I have a web page that allows the user to add assets by clicking on a button. When the user presses this button, the main goal is that the Quota get's divided by the number of assets added (so that the quota % is distributed equally)

Problem: Everything is working as planned, however, I would want to update the values of the Quota as new assets are added. What I want is the following: we start with 1 asset which takes 100%. Then, by adding a new asset, we would have 2 assets, both with 50%. Adding a 3rd asset would update the Quota values to 33.33% for all 3 assets, etc. The only way I can draw the graph is if I delete all the Potential Loss values (literally delete the 0 that is set to each row), which then updates to the correct Quota values. As of now, the code With 3 assets added will retrieve 100% for the 1st, 50% for the 2nd, and 33.33% for the 3rd asset (in this situation, all should change their quotas to 33.33% automatically).

Question: Is there a way to automatically update the Quota values as the user presses the Add Asset button or Draw Graph button?

Failed Implementations: I was thinking of taking the latest quota index value and then update the previous indices with this key values of quota so that whenever the user presses "draw graph", the previous quota values are updated and I tried doing that with Object.keys, but this will create conflict with the data since changing the values of one, will change the values of the other DOM elements (since they share the same index) - meaning if we change the name of the last "NEW STOCK" added, this will change the others as well.

Thank you in advance!

Original JS





    
    
    
    Document
    



    
        
            
                
                    Asset 
                    Quota % 
                    Potencial Loss % 
                
                
                     
                     
                    
                    
                
                Number of Assets: 1
                Quota per asset: 
                Total Loss:

I've also tried using Object.keys to update all the quota key values to the latest index value, but it isn't working as expected

2nd JS with the object.keys implementation (line 125)





    
    
    
    Document
    



    
        
            
                
                    Asset 
                    Quota % 
                    Potencial Loss % 
                
                
                     
                     
                    
                    
                
                Number of Assets: 1
                Quota per asset: 
                Total Loss:

user_1309377 · Answer

Alright I'll take a shot at this one. You do have a lot of complex selectors that could probably be reduced and data should be contained in some sort of object or array instead of relaying on the UI elements for data.

With that aside I think you just need to loop through each stock's quota input and update it to whatever the valuePercentage is you calculate.

This can be done with

  document.querySelectorAll('.quota').forEach(function(quota) {
    quota.value = valuePercentage;
  });

I also removed the ["Loss", perda] piece from the data.addRows since it eventually goes negative and you can't pie chart negative data.

//Define variables
let perda; //This value is calculated on line 154 

let indexSum = 1;
let valuePercentage = 100; //This value percentage is essentially the "Quota". This value will be 100% divided by the amount of indexSum (essentialy, divided by ativo1, ativo2, ativo3... ativo(i)) 
let indexSumRatio = 1;

let numQuota = 100;
let numAtivo = 1;
document.getElementById("indexSum").innerHTML = `Number of Assets: ${numAtivo++}`;
document.getElementById("indexQuota").innerHTML = `Quota per asset: ${valuePercentage}%`;

//Functions that will increase the number of Assets and change the quota % as the user adds new assets (Add Stock) on the HTML
function addNumAtivo() {
  document.getElementById("indexSum").innerHTML = `Number of Assets: ${numAtivo++}`;
  document.getElementById("indexQuota").innerHTML = `Quota per asset: ${valuePercentage}%`;


}
document.getElementsByClassName("button2").onclick = numAtivo;
document.getElementsByClassName("button2").onclick = valuePercentage;


////////////////////////////////////////////////////////////////////////////////////
//Load google chart graphs

google.charts.load("current", {
  packages: ["corechart"]
});
google.charts.setOnLoadCallback(drawChart);

// Function that will add new "Ativo", a new "Quota%" and a new "Perda potencial%" as the user presses the button "Add Stock". 
function addStock(event) {
  // find the last Wrapper [data-set="wrapper"]
  let lastWrapper = event.currentTarget.form.querySelector(`[data-type="wrapper"]:last-of-type`);
  // get the index of the last Wrapper
  let lastIndex = parseInt(lastWrapper.dataset.index);

  //clone the wrapper
  let clonerNode = lastWrapper.cloneNode(true);

  //change index of cloner Wrapper
  indexSum = clonerNode.dataset.index = parseInt(lastIndex) + 1;

  //changes values;
  clonerNode.querySelector(`.stock`).value = "NEW STOCK";
  valuePercentage = clonerNode.querySelector(`.quota`).value = (100 / indexSum);

  //append clonernode after lastWrapper
  lastWrapper.insertAdjacentElement('afterend', clonerNode);

  indexSumRatio = 1 / indexSum;

  document.querySelectorAll('.quota').forEach(function(quota) {
    quota.value = valuePercentage;
  });

  //console.log(`This is the sum of the indices (number of stocks = indexSum) ${indexSum}`)
  //console.log(`This is the valuePercentage (quota) ${valuePercentage}`)
  // console.log(`This is the indexSumRatio (perda potencial Ratio) ${indexSumRatio}`)

}

////////////////////////////////////////////////////////////////////////////////////
//Function that will be passed by the "Draw Graph" button so that everytime the user clicks the button, it takes the new input values and updates the pie chart
function drawChart() {
  let slices = []; //the amount of "slices" on the pie chart is also the number of indices added
  for (let i = 1; i <= indexSum; i++) { //i <= slices.length
    slices.push({
      ativo: document.querySelector(`div [data-type="wrapper"][data-index="${i}"] .stock`).value,
      quota: parseFloat(document.querySelector(`div [data-type="wrapper"][data-index="${i}"] .quota`).value)
    })
  }

  //Calculate the Loss (Perda) - this value is essentially the total amount of loss that the assets have taken when the user changes the "Perda potencial". This value is calculated by doing quota (valuePercentage) - perda potencial (perda) * (1/amount of assets)
  document.querySelector(".row").addEventListener("input", function(e) {
    const tgt = e.target;
    if (tgt.classList.contains("perda")) {
      perda = Number(tgt.closest(".tr").querySelector(".quota").value =
        valuePercentage - tgt.value * indexSumRatio)
    }
  });

  let sum = 0.0;
  for (let i = 0; i < slices.length; i++) {
    sum += slices[i].quota;
  };
  perda = 100.0 - sum;
  console.log(`This is the Total Loss (perda) ${perda}`)
  document.getElementById("indexLoss").innerHTML = `Total Loss: ${perda}%`;
  document.getElementsByClassName("button2").onclick = perda;


  //Create data table with input data
  var data = new google.visualization.DataTable();
  data.addColumn("string", "Ativo");
  data.addColumn("number", "Quota");
  data.addRows([
    ...slices.map(slice => ([slice.ativo, slice.quota])),
  ]);


  //Styling
  let options = {
    'legend': 'right',
    pieHole: 0.3,
    pieSliceText: 'value',
    is3D: true,
    colors: ['#FBB117', '#6AA121', '#728FCE', '#4863A0', '#7D0552', '#FF0000'],
    backgroundColor: '#DFCFBE',
    chartArea: {
      left: 50,
      right: 50,
      top: 70
    }
  };

  var chart = new google.visualization.PieChart(
    document.getElementById("piechart")
  );

  chart.draw(data, options);

}

{
  box-sizing: content-box;
}


/* Set additional styling options for the columns */

.column {
  float: left;
}


/* Set width length for the left, right and middle columns */

.left {
  width: 30%;
}

.right {
  width: 80%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
  height: 100%;
}

.td {
  display: inline-block;
  width: 120px;
  text-align: center;
  font-family: 'Trebuchet MS', sans-serif;
}

.tr {
  font-family: 'Trebuchet MS', sans-serif;
}

.button1 {
  width: 20%;
  margin-left: 35%;
  margin-right: 25%;
  margin-top: 10px;
  font-family: 'Trebuchet MS', sans-serif;
}

.button2 {
  width: 20%;
  margin-left: 35%;
  margin-right: 25%;
  margin-top: 10px;
  font-family: 'Trebuchet MS', sans-serif;
}

.piechart {
  width: 100%;
  height: 100%;
}


  
  
  
  Document
  



  
    
      
        
          Asset 
          Quota % 
          Potencial Loss % 
        
        
          
            
          
          
            
          
          
            
          
        
        Number of Assets: 1
        Quota per asset: 
        Total Loss:

Update all Object key values with the most recent DOM value after user presses a button

1 Answers