用户输入联动Google Pie Chart时Perda累计值计算错误修复问题

问题根因 #

1. 输入事件监听中错误对全局perda变量赋值，每次修改潜在损失都会用当前行的配额值覆盖全局变量，导致无法累计
2. drawChart内的累计逻辑完全失效：误用相等判断符==，未执行差值累加操作，还错误读取了字符串类型配额值的.value属性
3. 第4行（EURUSD）的输入框未绑定onchange事件，修改后不会自动触发图表更新
4. 存在嵌套的无效form标签，不符合HTML规范

修复后可直接运行的代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<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>配额饼图计算器</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
    <div>
        <div class="table">
            <form id="form">
                <div class="tr">
                    <div class="td">资产 </div>
                    <div class="td">配额 % </div>
                    <div class="td">潜在损失 % </div>
                </div>
                <div class="tr">
                    <div class="td"><input type="text" size="5" value="TSLA" class="stock" id="ativo1" onchange="drawChart();" /> </div>
                    <div class="td"><input type="number" min="0" max="20" value="20" class="quota" id="quota1" onchange="drawChart();" /> </div>
                    <div class="td"><input type="number" min="0" max="100" value="0" class="perda" id="perda1" /> </div>
                </div>
                <div class="tr">
                    <div class="td"><input type="text" size="5" value="AAPL" class="stock" id="ativo2" onchange="drawChart();" /> </div>
                    <div class="td"><input type="number" min="0" max="20" value="20" class="quota" id="quota2" onchange="drawChart();" /> </div>
                    <div class="td"><input type="number" min="0" max="100" value="0" class="perda" id="perda2" /> </div>
                </div>
                <div class="tr">
                    <div class="td"><input type="text" size="5" value="MSFT" class="stock" id="ativo3" onchange="drawChart();" /> </div>
                    <div class="td"><input type="number" min="0" max="20" value="20" class="quota" id="quota3" onchange="drawChart();" /> </div>
                    <div class="td"><input type="number" min="0" max="100" value="0" class="perda" id="perda3" /> </div>
                </div>
                <div class="tr">
                    <div class="td"><input type="text" size="5" value="EURUSD" class="stock" id="ativo4" onchange="drawChart();" /> </div>
                    <div class="td"><input type="number" min="0" max="20" value="20" class="quota" id="quota4" onchange="drawChart();" /> </div>
                    <div class="td"><input type="number" min="0" max="100" value="0" class="perda" id="perda4" /> </div>
                </div>
                <div class="tr">
                    <div class="td"><input type="text" size="5" value="BITCOIN" class="stock" id="ativo5" onchange="drawChart();" /> </div>
                    <div class="td"><input type="number" min="0" max="20" value="20" class="quota" id="quota5" onchange="drawChart();" /> </div>
                    <div class="td"><input type="number" min="0" max="100" value="0" class="perda" id="perda5" /></div>
                </div>
                <button type="button" onclick="drawChart();">生成图表</button>
            </form>
        </div>
        <div id="piechart" style="width: 900px; height: 500px;"></div>
        <script>
            document.querySelector(".table").addEventListener("input", function (e) {
                const tgt = e.target;
                if (tgt.classList.contains("perda")) {
                    // 仅更新当前行的配额，移除对全局损失变量的错误赋值
                    tgt.closest(".tr").querySelector(".quota").value = 20 - tgt.value * 0.2;
                    drawChart();
                }
            });
            google.charts.load("current", { packages: ["corechart"] });
            google.charts.setOnLoadCallback(drawChart);

            function drawChart() {
                let ativo1 = document.getElementById("ativo1").value;
                let ativo2 = document.getElementById("ativo2").value;
                let ativo3 = document.getElementById("ativo3").value;
                let ativo4 = document.getElementById("ativo4").value;
                let ativo5 = document.getElementById("ativo5").value;
                let quota1 = document.getElementById("quota1").value;
                let quota2 = document.getElementById("quota2").value;
                let quota3 = document.getElementById("quota3").value;
                let quota4 = document.getElementById("quota4").value;
                let quota5 = document.getElementById("quota5").value;
                
                // 重新计算累计损失：所有资产初始20%减去当前配额的差值总和
                let perdaTotal = 0;
                const quotaArray = [quota1, quota2, quota3, quota4, quota5];
                quotaArray.forEach(q => {
                    perdaTotal += 20 - parseFloat(q);
                })

                var data = new google.visualization.DataTable();
                data.addColumn("string", "资产");
                data.addColumn("number", "配额");
                data.addRows([
                    [ativo1, parseFloat(quota1)],
                    [ativo2, parseFloat(quota2)],
                    [ativo3, parseFloat(quota3)],
                    [ativo4, parseFloat(quota4)],
                    [ativo5, parseFloat(quota5)],
                    ["损失", parseFloat(perdaTotal)],
                ]);
                var options = {
                    title: "配额计算器",
                    pieHole: 0.3,
                    pieSliceText: 'value',
                    is3D: true,
                };
                var chart = new google.visualization.PieChart(document.getElementById("piechart"));
                chart.draw(data, options);
            }
        </script>
</body>
<style>
    .td {
        display: inline-block;
        width: 120px;
        text-align: right;
        margin: 2px 0;
    }
    button {
        margin: 10px 0 0 130px;
        padding: 4px 12px;
    }
</style>
</html>

主要修改点说明 #

• 移除了输入监听里对全局损失变量的错误赋值，改为每次修改潜在损失后自动触发图表重绘
• 重写了累计损失计算逻辑：遍历所有资产的当前配额，累加每个资产初始20%与当前配额的差值，得到总损失
• 给所有输入框补全了变更触发事件，修改任意值都会自动更新图表
• 优化了页面样式和中文文案，更符合使用习惯

内容的提问来源于stack exchange，提问作者user16845627