javascript - 用户按下按钮后，使用最新的 DOM 值更新所有对象键值-6ren

javascript - 用户按下按钮后，使用最新的 DOM 值更新所有对象键值

转载作者：行者123 更新时间：2023-12-04 14:03:34

上下文:我有一个网页，允许用户通过单击按钮添加 Assets 。当用户按下此按钮时，主要目标是将配额除以添加的 Assets 数量(以便平均分配配额百分比)

问题:一切都按计划进行，但是，我想在添加新 Assets 时更新配额的值。我想要的是以下内容:我们从 1 项 Assets 开始，该 Assets 占 100%。然后，通过添加一项新 Assets ，我们将拥有 2 项 Assets ，均为 50%。添加第 3 项 Assets 会将所有 3 项 Assets 的配额值更新为 33.33%，等等。我可以绘制图表的唯一方法是删除所有潜在损失值(字面上删除设置为每一行的 0)，这然后更新为正确的配额值。截至目前，添加了 3 个 Assets 的代码将为第一个 Assets 检索 100%，为第二个 Assets 检索 50%，为第三个 Assets 检索 33.33%(在这种情况下，所有 Assets 都应自动将其配额更改为 33.33%)。

问题:是否有一种方法可以在用户按下“添加 Assets ”按钮或“绘制图形”按钮时自动更新配额值？

失败的实现:我正在考虑获取最新的配额索引值，然后使用配额的这个键值更新之前的索引，这样每当用户按下“绘制图形”时，之前的配额值已更新，我尝试使用 Object.keys 执行此操作，但这会与数据发生冲突，因为更改其中一个的值会更改其他 DOM 元素的值(因为它们共享相同的索引) - 这意味着如果我们更改最后添加的“NEW STOCK”的名称，这也会更改其他名称。

提前致谢!

原始JS

<!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>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body style="background-color:#DFCFBE">
    <div class="row">
        <div class="column left">
            <form id=" form">
                <div class="tr">
                    <div class="td">Asset </div>
                    <div class="td">Quota % </div>
                    <div class="td">Potencial Loss % </div>
                </div>
                <div class="tr" data-type="wrapper" data-index="1">
                    <div class="td" data-type="field_div"><input type="text" size="5" value="NEW STOCK" class="stock"
                            onchange="drawChart();" /> </div>
                    <div class="td"><input type="number" min="0" max="100" value="100" class="quota"
                            onchange="drawChart();" /> </div>
                    <div class="td"><input type="number" min="0" max="100" value="0" class="perda" />
                    </div>
                </div>
                <p onload="addNumAtivo();" id="indexSum">Number of Assets: 1</p>
                <p onload="addNumAtivo();" id="indexQuota">Quota per asset: </p>
                <p id="indexLoss">Total Loss:</p>

                <button class="button2" type="button" onclick="addStock(event), addNumAtivo();">Add
                    Asset</button>
                <button class="button1" type="button" onclick="drawChart();">Draw Graph</button>
            </form>
        </div>
    </div>

    <div class="column right" style="position:relative;width:70%">
        <div class=" piechart" id="piechart" style="position:absolute;right:0px;top:0px;width: 900; height: 590px;">
        </div>
    </div>
</body>

<script>
    //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;

        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])), ["Loss", perda],
        ]);


        //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);

    }


//adicionar for loop para ter o valor da quota personalizada e fazer os calculos da perda consoante esse valor

////////////////////////////////////////////////////////////////////////////////////
//RESOURCES

    //https://www.youtube.com/watch?v=y17RuWkWdn8&ab_channel=WebDevSimplified 
      // usar este video para criar uma função que faça append de um novo div com atributos semelhantes aos outros para permitir ao usuario adicionar novos ativos com o cloque de um butao 
    //isEmpty() -> para fazer reset dos valores ao adicionar new stock
        //
    //
        //
    // 
        //
</script>

<style>
    {
        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%;
    }
</style>

</body>

</html>

我也尝试过使用 Object.keys 将所有 quota 键值更新为最新的索引值，但它没有按预期工作

带有 object.keys 实现的第二个 JS(第 125 行)

<!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>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body style="background-color:#DFCFBE">
    <div class="row">
        <div class="column left">
            <form id=" form">
                <div class="tr">
                    <div class="td">Asset </div>
                    <div class="td">Quota % </div>
                    <div class="td">Potencial Loss % </div>
                </div>
                <div class="tr" data-type="wrapper" data-index="1">
                    <div class="td" data-type="field_div"><input type="text" size="5" value="NEW STOCK" class="stock"
                            onchange="drawChart();" /> </div>
                    <div class="td"><input type="number" min="0" max="100" value="100" class="quota"
                            onchange="drawChart();" /> </div>
                    <div class="td"><input type="number" min="0" max="100" value="0" class="perda" />
                    </div>
                </div>
                <p onload="addNumAtivo();" id="indexSum">Number of Assets: 1</p>
                <p onload="addNumAtivo();" id="indexQuota">Quota per asset: </p>
                <p id="indexLoss">Total Loss:</p>

                <button class="button2" type="button" onclick="addStock(event), addNumAtivo();">Add
                    Asset</button>
                <button class="button1" type="button" onclick="drawChart();">Draw Graph</button>
            </form>
        </div>
    </div>

    <div class="column right" style="position:relative;width:70%">
        <div class=" piechart" id="piechart" style="position:absolute;right:0px;top:0px;width: 900; height: 590px;">
        </div>
    </div>
</body>

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

    let indexSum = 1, indexSumRatio = 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)) 
    //valuePercentage.toFixed(2)
    //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;

        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}`)
        //colocar algo que faça reset aos valores 

    }


    ////////////////////////////////////////////////////////////////////////////////////
    //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 ativo;
        let quota;
        let updateQuota;
        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
            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);
            slices.push({
                ativo: ativo,
                quota: quota
            })
            //updateQuota = slices[slices.length - 1]
        }
        Object.keys(slices).forEach(quota => { slices[quota] = slices[slices.length - 1] });

        console.log(slices)

        // //get last index - video 39 JS
        //console.log(friends[friends.length-1])
        //https://www.udemy.com/course/the-complete-javascript-course/learn/lecture/22648249#overview

        // for (let j = 1; j <= indexSum - 1; j++) {
        //     slices.push({
        //         ativo: ativo,
        //         quota: quota
        //     })
        // }
        //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 = Math.round(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])), ["Loss", perda],
        ]);


        //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);

    }


//adicionar for loop para ter o valor da quota personalizada e fazer os calculos da perda consoante esse valor

////////////////////////////////////////////////////////////////////////////////////
//RESOURCES

    //https://www.youtube.com/watch?v=y17RuWkWdn8&ab_channel=WebDevSimplified 
      // usar este video para criar uma função que faça append de um novo div com atributos semelhantes aos outros para permitir ao usuario adicionar novos ativos com o cloque de um butao 
    //isEmpty() -> para fazer reset dos valores ao adicionar new stock
        //
    //
        //
    // 
        //
</script>

<style>
    {
        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%;
    }
</style>

</body>

</html>

最佳答案

好的，我会试试这个。您确实有很多可能可以减少的复杂选择器，数据应该包含在某种对象或数组中，而不是依赖于 UI 元素来获取数据。

除此之外，我认为您只需要遍历每只股票的配额输入并将其更新为您计算的任何 valuePercentage。

这可以用

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

我还从 data.addRows 中删除了 ["Loss", perda] 部分，因为它最终会变为负数，并且您无法绘制负数数据饼图。

//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%;
}

<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">
  <div class="row">
    <div class="column left">
      <form id=" form">
        <div class="tr">
          <div class="td">Asset </div>
          <div class="td">Quota % </div>
          <div class="td">Potencial Loss % </div>
        </div>
        <div class="tr" data-type="wrapper" data-index="1">
          <div class="td" data-type="field_div">
            <input type="text" size="5" value="NEW STOCK" class="stock" onchange="drawChart();" />
          </div>
          <div class="td">
            <input type="number" min="0" max="100" value="100" class="quota" onchange="drawChart();" />
          </div>
          <div class="td">
            <input type="number" min="0" max="100" value="0" class="perda" />
          </div>
        </div>
        <p onload="addNumAtivo();" id="indexSum">Number of Assets: 1</p>
        <p onload="addNumAtivo();" id="indexQuota">Quota per asset: </p>
        <p id="indexLoss">Total Loss:</p>

        <button class="button2" type="button" onclick="addStock(event), addNumAtivo();">Add
                    Asset</button>
        <button class="button1" type="button" onclick="drawChart();">Draw Graph</button>
      </form>
    </div>
  </div>

  <div class="column right" style="position:relative;width:70%">
    <div class=" piechart" id="piechart" style="position:absolute;right:0px;top:0px;width: 900; height: 590px;">
    </div>
  </div>

</body>

关于javascript - 用户按下按钮后，使用最新的 DOM 值更新所有对象键值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69260114/

文章推荐： javascript - 突然出现 TypeORM FindConditions 类型错误

文章推荐： c++ - UuidCreate 和 CoCreateGuid 的区别

文章推荐： python - 使用 Python 进行具有固定效应的面板数据回归

文章推荐： amazon-web-services - AWS IAM 和 KMS 策略 'muddlement'

uml - guest 、用户、版主、管理员 - vs - 用户(角色 : guest, 用户、版主、管理员)
在为 Web 应用程序用例图建模时，为用户可以拥有的每个角色创建一个角色是否更好？或拥有一个角色、用户和一个具有特权的矩阵？ guest < 用户 < 版主 < 管理员 1: guest 、用户、版主
postgresql - Postgres 不允许更改角色 super 用户，我的默认用户不是 super 用户
我无法使用 Elixir 连接到 Postgres: ** (Mix) The database for PhoenixChat.Repo couldn't be created: FATAL 28P
Java Lambda 流列表<用户> 到映射<角色，列表<用户>>
这个问题已经有答案了: Group by field name in Java (7 个回答) 已关闭 7 年前。我必须编写一个需要 List 的方法并返回 Map> . User包含 Person
PHP，SQL - 获取表 id = 用户 id 的数据并计算行 = 用户 id 的其他表
感谢您的帮助，首先我将显示代码: $dotaz = "Select * from customers JOIN contracts where customers.user_id ='".$_SESS
android - 从 firebase 获取所有 child (用户)但向一个 child (用户)显示按钮？
我只想向所有用户中的一个用户显示一个按钮。我尝试了 orderByKey() 但没有成功! 用户模型有 id 成员，我尝试使用 orderByChild("id") 但结果相同! 我什至尝试了以下技巧
database - 让 PostgreSQL BDR 在没有 super 用户(postgres 用户)权限的情况下工作？
我们在工作中从 MongoDB 切换到 Postgres，我正在建立一个 BDR 组。在这一步，我正在考虑安全性并尽可能锁定。因此，我希望设置一个 replication 用户(角色)并让 BDR
"this.users = users;" not binding to "users;" property(“this.users=用户；”不绑定到“用户；”属性)
export class UserListComponent implements OnInit{ users; constructor(private userService: UserS
symfony - 更改密码在 FOS 用户 bundle + Sonata 用户 bundle +sonata 管理员 bundle 中不起作用
我可以使用 Sonata User Bundle 将 FOS 包集成到 sonata Admin 包中。我的登录功能正常。现在我想添加 FOSUserBundle 中的更改密码等功能到 sonata
oauth - 创建应用程序时，我从 LinkedId 获得的 OAuth 用户 token 和 OAuth 用户 key 的目的是什么
在 LinkedIn 中创建新应用程序时，我得到 4 个单独的代码: API key 秘钥 OAuth 用户 token OAuth 用户密码我在 OAuth 流程中使用前两个。的目的是什么？最后
c# - 用户 '' 登录失败，无法打开登录请求的数据库 "Database1.mdf"。登录失败。用户 'rBcollo-PC\rBcollo' 登录失败
所以..我几乎解决了所有问题。但现在我要处理另一个问题。我使用了这个连接字符串: SqlConnection con = new SqlConnection(@"Data Source=.\SQLEX
javascript - 通过 ids 匹配 2 个数组(用户 [用户 id 作为键] 到订单 [订单 ids 数组的值])
我有一组“用户”和一组“订单”。我想列出每个 user_id 的所有 order_id。 var users = { 0: { user_id: 111, us
django - “用户”对象没有属性is_authenticated
我已经为我的Django应用创建了一个用户模型 class User(Model): """ The Authentication model. This contains the u
laravel - 未定义密码重置器 [用户]
我被这个问题困住了，找不到解决方案。寻找一些方向。我正在用 laravel 开发一个新的项目，目前正致力于用户认证。我正在使用 Laravels 5.8 身份验证模块。对密码恢复 View 做了一些
ansible 用户配置中的当前用户
安装后我正在使用ansible配置几台计算机。为此，我在机器上本地运行 ansible。安装中的“主要”用户通常具有不同的名称。我想将该用户用于诸如 become_user 之类的变量. “主要”用
Django从批处理文件创建 super 用户
我正在尝试制作一个运行 syncdb 的批处理文件来创建一个数据库文件，然后使用用户名“admin”和密码“admin”创建一个 super 用户。到目前为止我的代码: python manage.
Vim 用户，你们的右手放在哪里？
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 6 年前。 Improv
Azure 故障转移数据库不复制登录名/用户
我已在 Azure 数据库服务器上设置异地复制。服务器上运行的数据库之一具有我通过 SSMS 创建的登录名和用户: https://learn.microsoft.com/en-us/azure/s
Ionic2 NativeStorage无法获取项目(用户)
我有一个 ionic 2 应用程序，正在使用 native FB Login 来检索名称/图片并将其保存到 NativeStorage。流程是我打开WelcomePage、登录并保存数据。从那里，na
Django - 用户 is_active
这是我的用户身份验证方法: def user_login(request): if request.method == 'POST': username = request.P
python - “用户”对象不可迭代
我试图获取来自特定用户的所有推文，但是当我迭代在模板中抛出推文时，我得到“User”对象不可迭代观看次数 tweets = User.objects.get(username__iexact='us

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 用户按下按钮后，使用最新的 DOM 值更新所有对象键值