我可以更新使用 innerhtml 显示的 javascript 变量吗?

can I update a javascript variable being displayed using innerhtml

本文关键字：javascript 变量 显示 更新 innerhtml 我可以      更新时间：2023-09-26

我正在尝试用javascript构建一个基本的预算计算器工具，该工具在页面顶部显示一个运行总计，当单个预算项目更改时会更新。为此，我正在使用[document.getElementById("runningTotal").innerHTML += total_sp;]。这适用于计算运行总计，但每次我进行更改时，新的总计都会附加到旧的总计中，因此屏幕上的输出毫无意义。谁能告诉我如何做到这一点，以便每次进行更改时都会更新运行总计，用新的总计替换旧的总计？我是这一切的新手，非常感谢你能提供的任何帮助。干杯！

<script>
    // defining pre-change spending levels
    var research_sp = 217200
    var wage_sp = 155000
    var total_sp = wage_sp + research_sp
    function changeresearchspending() {
        var nameElement = document.getElementById("researchcalc");
        //defining percentage change to research spending levels
        var research_r = nameElement.value;
        var research_ch = research_r * research_sp;
        var research_sp_end = research_sp + research_ch;
        total_sp = total_sp + research_ch
        document.getElementById("researchChange").innerHTML += research_ch;
        document.getElementById("endresearchTotal").innerHTML += research_sp_end;
        document.getElementById("endTotalSpend1").innerHTML += total_sp;
        document.getElementById("runningTotal").innerHTML += total_sp;
    }
    function changewagespending() {
        var nameElement = document.getElementById("wagecalc");
        //defining percentage change to wage spending levels
        var wage_r = nameElement.value;
        var wage_ch = wage_r * wage_sp;
        var wage_sp_end = wage_sp + wage_ch;
        total_sp = total_sp + wage_ch
        document.getElementById("wageChange").innerHTML += wage_ch;
        document.getElementById("endwageTotal").innerHTML += wage_sp_end;
        document.getElementById("endTotalSpend2").innerHTML += total_sp;
        document.getElementById("runningTotal").innerHTML += total_sp;
    }
</script>
<div id="runningTotal">
    SPENDING (RUNNING TOTAL) £
</div>
<br>
<div id="startresearchTotal">
    Baseline research spending is: £
    <script>document.write(research_sp)</script>
    <br><br>
    Baseline wage spending is: £
    <script>document.write(wage_sp)</script>
    <br><br>
    Baseline total spending is: £
    <script>document.write(total_sp)</script>
</div>
<br>
<input id="researchcalc" type="number">
<input type="button" value="change research spend" onClick="changeresearchspending()">
<div id="researchChange">
    <br> Change in research spending is: £
</div>
<div id="endresearchTotal">
    <br> New research spending is: £
</div>
<div id="endTotalSpend1">
    <br> New total spending is: £
</div>
</div>
<br>
<input id="wagecalc" type="number">
<input type="button" value="change wage spend" onClick="changewagespending()">
<div id="wageChange">
    <br> Change in wage spending is: £
</div>
<div id="endwageTotal">
    <br> New wage spending is: £
</div>
<div id="endTotalSpend2">
    <br> New total spending is: £
</div>

您可以将 += 替换为 =，如下所示：

document.getElementById("runningTotal").innerHTML = total_sp;
相关文章：