如何将计算结果存入surveyResults对象以动态渲染HTML？

要实现把计算得到的totalSaving存入surveyResults的savings属性并动态渲染页面，你需要在计算完成后先更新数组对象，再基于更新后的数组生成HTML内容。这里是具体的修改步骤和完整代码：

关键修改点 #

• 更新surveyResults的savings值：在计算出totalSaving后，直接修改数组中对应对象的savings属性（因为你的surveyResults是单元素数组，我们直接更新第一个元素即可）。
• 修正事件参数：把event作为参数传入calc函数，避免在严格模式下出现未定义的错误。
• 确保渲染使用最新数据：更新数组后再执行map生成HTML，这样新的savings值才会被渲染出来。

修改后的完整代码 #

const calculate = document.getElementById('one');
const resultsContainer = document.querySelector('.card-wrapper-results');
// 把event作为参数传入calc函数
calculate.addEventListener('click', calc);

let surveyResults = [ { savings: 10.23, price: 35.84 } ];
let chartResults = [ { year1: 200, year2: 300, year3: 400, year4: 500, year6: 600, year7: 700, year8: 800, year9: 900, year10: 100 } ];

let yearlySavings;
let scrappagePayment;
let smartPayment;

// 接收event参数
function calc(event) {
    event.preventDefault();
    let gas = parseFloat(document.getElementById('gas').value);
    let price = parseFloat(document.getElementById('price').value);
    let gasSaving;
    let smartSaving;
    let result;
    let totalSaving;

    smartSaving = gas * 0.2;
    gasSaving = gas * 0.3;
    totalSaving = smartSaving + gasSaving;
    result = price - totalSaving;

    // 关键：更新surveyResults中的savings属性为计算得到的totalSaving
    surveyResults[0].savings = totalSaving;

    // 现在基于更新后的数组生成HTML
    let displayResults = surveyResults.map(function(item) {
        console.log(item);
        return `<div class="card2-results">
            <h1>每月燃气节省金额</h1>
            <p class="job-title">即时节省</p>
            <h2 class="about-h2"> ${item.savings.toFixed(2)} </h2> <!-- 可选：保留两位小数，让金额更规范 -->
            <ul class="about-payment">
                <li><i class="fas fa-check"></i> 立即开始节省</li>
                <li><i class="fas fa-check"></i> EcoTech Plus 节省30%</li>
                <li><i class="fas fa-check"></i> Hive智能供暖节省18%</li>
                <li><i class="fas fa-check"></i> 包含Hive智能供暖系统</li>
            </ul>
            <a href="" class="btn-results">第一年 £336</a>
        </div>`;
    });
    resultsContainer.innerHTML = displayResults;
}

额外优化建议 #

• 使用toFixed(2)格式化totalSaving，确保金额显示为两位小数（比如15.00而不是15），提升页面的专业性。
• 如果未来surveyResults可能包含多个对象，可以根据业务逻辑选择更新特定对象，或者生成新的数组替换原数组。

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