javascript - 将用户更改的值存储在数组中，然后将这些值传递给公式以更新 DOM

问题描述

上下文：我有一个饼图，它为用户添加的每项资产设置配额，以便用户可以更改“潜在损失”，并根据添加的资产数量反映“配额”百分比的变化。

目前，配额百分比是以固定方式计算的，这意味着所有资产的配额 (100%) 除以添加的资产数量（因此 5 个资产将等于每个资产 20% 的饼图）。我想让这更加动态，以便用户可以自由更改配额值，然后这些配额值将在对象切片上更新。例如，如果用户添加了 3 个资产，他/她应该可以自由地将第一个资产的值更改为一个数字（比如说 20%），第二个更改为 45%，第三个更改为 35%，等等。

问题：当用户更改“潜在损失”时，问题就开始了。此潜在损失通过配额 - 潜在损失 (perda) * (1/资产数量) 计算（此公式应用于我在尝试解决此问题时添加的代码片段），目前仅取最后一个的值指数。在前面的示例中，使用第一次尝试，这意味着如果用户将第一次或第二次资产（分别为 20% 和 45% 的配额）的潜在损失更改为 1%，则为第一次的配额第二个资产将“重置”为最后添加的资产的值 (35%)。截至目前，在第 2 次尝试中，The specified value "NaN" cannot be parsed, or is out of range.当我将第 1 次设置为 20%、第 2 次设置为 45% 和第 3 次设置为 35%，然后尝试更改其中任何一个的“潜在损失”时，我一直得到。

问题：我如何才能使“配额”根据对每种资产（即指数）的“潜在损失”所做的更改而不是基于最后添加的资产来计算？

尝试解决这个问题：我尝试使用 slices[i].quota 并创建一个 for 循环，以便我可以尝试在更改潜在损失的同时更改各自的配额，但它一直占用最后一个资产的配额代码片段因为这是：

提前道歉，因为过于广泛！非常欢迎任何帮助！

第一次尝试：

  document.querySelector(".perda").addEventListener("input", function (e) {
    const tgt = e.target;
    if (tgt.classList.contains("perda")) {
      for (let i = 0; i <= slices.length; i++) {
        perda = Math.round(
          (tgt.closest(".tr").querySelector(".quota").value =
            slices[i].quota - tgt.value * indexSumRatio)
        );
      }
    }
  });

第二次尝试（和当前片段）：在这里，我尝试将用户更改的“配额”值保存在一个数组中，然后循环遍历该数组以将这些值作为公式中的“配额”（见 test[i ])，但我不断得到 NaN

  for (let i = 0; i <= indexSum; i++) {
    test = slices.map((value) => value.quota); // Store the current values of quota in an array
    console.log(` New quota values ${test}`);
  }

  document.querySelector(".loss").addEventListener("input", function (e) {
    const tgt = e.target;
    if (tgt.classList.contains("perda")) {
      for (let i = 0; i <= indexSum; i++) {
       
          // make "perda" take the value of "quota" as test[i] for each index on the saved quota. I.e.
          //change the values of the "quotas" to be equal to the newly updated quota values which are saved in test
          perda = (tgt.closest(".tr").querySelector(".quota").value =
            test[i] - tgt.value * indexSumRatio) //Breakpoint - I keep getting NaN doing this
       
      }
    }
  });

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>



<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body style="background-color:#DFCFBE">
  <section class="no-padding-top no-padding-bottom">
    <div class="container-fluid">
      <div class="statistic-block block">
        
      </div>
      <div class="loss">
        <div class="row">

          <div class="col">
            <form id=" form">
              <button class="button2" type="button" onclick="addStock(event);">Add
                Asset</button>

              <div class="tr" data-type="wrapper" data-index="1">
                <div class="td"><strong>Asset </strong>
                  <div class="td" data-type="field_div"><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();" />
                  </div>
                </div>
                <div class="td"><strong>Quota</strong>
                  <div class="td"><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" />
                  </div>
                </div>
                <div class="td"><strong>Potential Loss</strong>
                  <div class="td"><input style="background: rgba(255,255,255,0.5);border-radius: 10px; border: none"
                      type="number" min="0" max="100" value="0" class="perda" />
                  </div>
                </div>
              </div>
          </div>
          </form>
          <div class="col-sm">
            <button class="button1" type="button" onclick="drawChart();">Draw Graph</button>
            <div id="chart_wrap">
              <div id="piechart" style="width: 400px; height: 400px;"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>

</html>

标签： javascripthtml

javascript - 将用户更改的值存储在数组中，然后将这些值传递给公式以更新 DOM

问题描述

解决方案

推荐阅读