Tengo el siguiente código:
<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>Así que mi resultado es algo como:
Lo que intento hacer es mostrar todos los pagos en la misma lista, así:
¿Qué debo hacer con mi list.innerText para mostrar los otros resultados, así como cualquier otro resultado que pueda necesitar mostrar en el futuro?
Si solo tiene 3 vars de pago, puede ir por este camino. De lo contrario, debe usar un ciclo para iterar sobre todos sus pagos.
<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>```Necesitas usar un bucle. Agréguelos a una matriz y cree un nuevo elemento de lista para cada uno. Recomiendo encarecidamente leer sobre ellos aquí si eres nuevo .
<!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>Podrías hacer que cada uno de ellos sea un elemento li hijo de un ul
<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>