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时，控制台只显示输出中的一个

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

这条线似乎错了

Count

您需要将document.getElementById(currencyType[type]+"USDTOTAL").innerHTML = total;追加到USDTOTAL ，就像之前在同一循环中一样。

成功

currencyType[type].innerHTML

或重构代码

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

Answer 2

尝试追加结果：

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
}

Answer 3

我认为你可以提高你的代码

从这里开始：

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

到这里：

currencyType.forEach(currency => {
 const prefix = currency.innerHTML;
 const node = document.getElementById(`${prefix}USDVAL`).textContent * document.getElementById(`${prefix}USDAMT`).value;
 const total = node.toFixed(2);
 document.getElementById(`${prefix}USDTOTAL`).innerHTML = total;
});

如何从For循环中获取多个输出

3 个答案: