title: Storing changed values by user in an array and then passing these values onto a formula to update DOM
body: <p><strong>Context</strong>: I have a pie chart that takes quotas for each asset added by the user so that the user can change the &quot;potential loss&quot; and that reflects a change on the &quot;quota&quot; % based on the number of assets that were added.</p>
  <p>Currently, the quota % is being calculated in a fixed manner, meaning that the quota for all of the assets (100%) is being divided by the number of assets added (so 5 assets would equal a pie slice of 20% for each asset). I'd like to make this more dynamic so that the user can change the quota values freely and these quota values would then be updated on the object slices. For example, if the user adds 3 assets, he/she should have the freedom to change the values of the 1st asset to a number (let's say 20%), the 2nd to 45% and the 3rd to 35%, etc.</p>
  <p><strong>Problem</strong>: The problem begins when the user changes the &quot;potential loss&quot;. This potential loss is calculated by quota - potencial loss (perda) * (1/amount of assets) (this formula is applied on the code snippet I added on the attempt to solve this) and it is currently only taking the value of the last index. In the previous example, and using the 1st attempt, this would mean that if the user changes the potential loss to, let's say 1 %, on the 1st or 2nd assets (with 20 and 45% quota respectively), the quota for the 1st and 2nd assets will &quot;reset&quot; to the values of the last asset added (35%). As of now, with the 2nd attempt, I keep getting <code>The specified value &quot;NaN&quot; cannot be parsed, or is out of range.</code> when I set the 1st to 20%, the 2nd to 45% and 3rd to 35% and then try to change the &quot;potential loss&quot; for any of them.</p>
  <p><strong>Question</strong>: How could I make it so that the &quot;quota&quot; is calculated based on the changes made on the &quot;potential loss&quot; for each asset (i.e. index) and not based on the last asset added?</p>
  <p><strong>Attempts to solve this</strong>: I've tried using slices[i].quota and make a for loop so that I could try and change the respective quotas while changing the potential loss, but it keeps taking the quota of the last asset The code snippet for this is :</p>
  <p>Apologies in advance for being overtly extensive! Any help is very welcome!</p>
  <p>1st attempt:</p>
  <pre><code>  document.querySelector(&quot;.perda&quot;).addEventListener(&quot;input&quot;, function (e) {
      const tgt = e.target;
      if (tgt.classList.contains(&quot;perda&quot;)) {
        for (let i = 0; i &lt;= slices.length; i++) {
          perda = Math.round(
            (tgt.closest(&quot;.tr&quot;).querySelector(&quot;.quota&quot;).value =
              slices[i].quota - tgt.value * indexSumRatio)
          );
        }
      }
    });
  </code></pre>
  <p>2nd attempt (and current snippet):
  Here I tried to save the changed values of &quot;quota&quot; by the user in an array and then loop through this array to place these values as the &quot;quota&quot; in the formula (seen as test[i]), but I keep getting NaN</p>
  <pre><code>  for (let i = 0; i &lt;= indexSum; i++) {
      test = slices.map((value) =&gt; value.quota); // Store the current values of quota in an array
      console.log(` New quota values ${test}`);
    }
  
    document.querySelector(&quot;.loss&quot;).addEventListener(&quot;input&quot;, function (e) {
      const tgt = e.target;
      if (tgt.classList.contains(&quot;perda&quot;)) {
        for (let i = 0; i &lt;= indexSum; i++) {
         
            // make &quot;perda&quot; take the value of &quot;quota&quot; as test[i] for each index on the saved quota. I.e.
            //change the values of the &quot;quotas&quot; to be equal to the newly updated quota values which are saved in test
            perda = (tgt.closest(&quot;.tr&quot;).querySelector(&quot;.quota&quot;).value =
              test[i] - tgt.value * indexSumRatio) //Breakpoint - I keep getting NaN doing this
         
        }
      }
    });
  </code></pre>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  
  
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;script src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body style="background-color:#DFCFBE"&gt;
    &lt;section class="no-padding-top no-padding-bottom"&gt;
      &lt;div class="container-fluid"&gt;
        &lt;div class="statistic-block block"&gt;
          
        &lt;/div&gt;
        &lt;div class="loss"&gt;
          &lt;div class="row"&gt;
  
            &lt;div class="col"&gt;
              &lt;form id=" form"&gt;
                &lt;button class="button2" type="button" onclick="addStock(event);"&gt;Add
                  Asset&lt;/button&gt;
  
                &lt;div class="tr" data-type="wrapper" data-index="1"&gt;
                  &lt;div class="td"&gt;&lt;strong&gt;Asset &lt;/strong&gt;
                    &lt;div class="td" data-type="field_div"&gt;&lt;input
                        style="background: rgba(255,255,255,0.5);border-radius: 10px; border: none;  text-align: center;"
                        type="text" size="10" value="New" class="stock" onchange="drawChart();" /&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="td"&gt;&lt;strong&gt;Quota&lt;/strong&gt;
                    &lt;div class="td"&gt;&lt;input
                        style="background: rgba(255,255,255,0.5);border-radius: 10px; border: none; padding: 0.1em; margin-bottom: 5px;"
                        type="number" min="0" max="100" value="100" class="quota" id="quota" /&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="td"&gt;&lt;strong&gt;Potential Loss&lt;/strong&gt;
                    &lt;div class="td"&gt;&lt;input style="background: rgba(255,255,255,0.5);border-radius: 10px; border: none"
                        type="number" min="0" max="100" value="0" class="perda" /&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;/form&gt;
            &lt;div class="col-sm"&gt;
              &lt;button class="button1" type="button" onclick="drawChart();"&gt;Draw Graph&lt;/button&gt;
              &lt;div id="chart_wrap"&gt;
                &lt;div id="piechart" style="width: 400px; height: 400px;"&gt;&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>