javascript - 如何从 For 循环中获取多个输出以显示

Question

我有一个 for 循环来从数组中获取多个输出。 currencyType[type] 用于预先添加适当的字母以匹配 HTML 中的 DIV ID。

for(let type = 0; type <= currencyType.length; type++) {
    // This grabs the number from XRPUSDVAL + XRPUSDAMT                        
    let node = document.getElementById(currencyType[type].innerHTML+"USDVAL").textContent * document.getElementById(currencyType[type].innerHTML+"USDAMT").value;
    let total = node.toFixed(2);
    console.log(total)
}

我使用上面的语句在我的控制台中获得了 total 的 2 个值，它们是动态数字。

65704.50
99.91

然而，当我添加一条语句以尝试将其输出到我的 HTML 上的 DIV ID 时，控制台仅显示其中 1 个输出的结果

for(let type = 0; type <= currencyType.length; type++) {
    // This grabs the number from XRPUSDVAL + XRPUSDAMT                        
    let node = document.getElementById(currencyType[type].innerHTML+"USDVAL").textContent * document.getElementById(currencyType[type].innerHTML+"USDAMT").value;
    let total = node.toFixed(2);
    console.log(total)
    document.getElementById(currencyType[type]+"USDTOTAL").innerHTML = total; // <------ Added This Statement
}

这是 HTML 部分以及 Javascript 与之交互的部分

<div class="container">
    <div class="row">
        <div class="col-sm-4 pbf-crypto-container">
            <form method="POST" action="/users/currencies/68">
                <h3 class="pbfCurrencyType">ETH</h3>
                <input class="form-control-lg" id="ETHUSDAMT" name="amount" type="text" value="75">
                <h3>Market Value: ($)</h3>
                <div id="ETHUSDVAL"></div>
                <h3>Total Value: ($)</h3>
                <div id="ETHUSDTOTAL"></div>
                <hr>
                <input class="btn btn-primary" id="pbf-update" type="submit" value="Update">
                <button class="btn btn-primary" id="pbf-refresh">Refresh</button>
            </form>
        </div>
        <div class="col-sm-4 pbf-crypto-container">
            <form method="POST" action="/users/currencies/60">
                <h3 class="pbfCurrencyType">XRP</h3>
                <input class="form-control-lg" id="XRPUSDAMT" name="amount" type="text" value="100">
                <h3>Market Value: ($)</h3>
                <div id="XRPUSDVAL"></div>
                <h3>Total Value: ($)</h3>
                <div id="XRPUSDTOTAL"></div>
                <hr>
                <input class="btn btn-primary" id="pbf-update" type="submit" value="Update">
                <button class="btn btn-primary" id="pbf-refresh">Refresh</button>
            </form>
        </div>
    </div>
</div>

我想知道是否有人可以告诉我正确的方法，以便在我的 for 循环中它能够将 total 插入到我指定的 DIV 部分中。我不确定我在这里做错了什么。任何帮助将非常感激。谢谢。

Answer 1

这行好像是错的

document.getElementById(currencyType[type]+"USDTOTAL").innerHTML = total;  

您需要像前面相同的循环中那样将 USDTOTAL 附加到 currencyType[type].innerHTML。

成功

document.getElementById(currencyType[type].innerHTML +"USDTOTAL").innerHTML = total;  

或者重构代码

for(let type = 0; type <= currencyType.length; type++) 
{
    let prefix = currencyType[type].innerHTML ;
    let node = document.getElementById( prefix +"USDVAL").textContent * document.getElementById( prefix +"USDAMT").value;
    let total = node.toFixed(2);
    console.log(total)
    document.getElementById( prefix + "USDTOTAL").innerHTML = total;
}