我有以下代碼：
<div id=payments></div>
<script>
var payment01 = 100*0.2
var payment02 = 100*0.05
var payment03 = 100*0.7
var list = document.createElement("li");
list.innerText = `${payment01}`;
document.getElementById("payments").appendChild(list);
</script>
所以我的結果是這樣的：
- 20
我想要做的是在同一個串列中顯示所有付款，如下所示：
- 20
- 5
- 70
我需要做什么list.innerText才能顯示其他結果以及將來可能需要顯示的任何其他結果？
uj5u.com熱心網友回復：
您可以將它們中的每一個都設為 ul 的 li 元素子元素
<div id=payments></div>
<script>
var payment01 = 100*0.2
var payment02 = 100*0.05
var payment03 = 100*0.7
var list = document.createElement("ul");
var item1 = document.createElement("li");
var item2 = document.createElement("li");
var item3 = document.createElement("li");
item1.innerText = `${payment01}`;
item2.innerText = `${payment02}`;
item3.innerText = `${payment03}`;
list.appendChild(item1);
list.appendChild(item2);
list.appendChild(item3);
document.getElementById("payments").appendChild(list);
</script>
uj5u.com熱心網友回復：
如果您只有 3 個付款變數，則可以采用這種方式。否則，您應該使用回圈來遍歷所有付款。
<script>
var payment01 = 100*0.2
var payment02 = 100*0.05
var payment03 = 100*0.7
var list = document.createElement("ul");
list.innerHTML = `<li>${payment01}<\/li><li>${payment02}<\/li><li>${payment03}<\/li>`;
document.getElementById("payments").appendChild(list);
</script>```
uj5u.com熱心網友回復：
您需要使用回圈。將它們添加到一個陣列并為每個元素創建一個新的串列項元素。如果你是新手，強烈建議在這里閱讀它們。
<!DOCTYPE html>
<html>
<body>
<div id="payments"></div>
<script>
const payment01 = 100 * 0.2;
const payment02 = 100 * 0.05;
const payment03 = 100 * 0.7;
const payments = [payment01, payment02, payment03];
const paymentsDiv = document.getElementById("payments");
for (const payment of payments) {
const list = document.createElement("li");
list.innerText = `${payment}`;
paymentsDiv.appendChild(list);
}
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/462172.html
標籤：javascript html css 内文