Así que estoy creando objetos JSON para ciertos ingresos y gastos. He agregado nombres, montos y si es recurrente o no.
Sin embargo, estoy tratando de imprimir valores de estos objetos en un elemento div usando un bucle for. Intenté obtener el div por getElementById y luego usar innerHtml para imprimir los valores del objeto, pero aparece este error:
Uncaught TypeError: Cannot read properties of null (reading 'innerHTML')A continuación se muestra mi javascript:
const incomes = [ { name: "Walter", amount: 2000, recurring: true, }, { name: "James", amount: 4000, recurring: true, }, { name: "Mike", amount: 500, recurring: true, }, { name: "Jane", amount: 1000, recurring: true, }, { name: "Larry", amount: 5000, recurring: true, }, ]; for (i = 0; i < incomes.length; i++) { let container = document.getElementById("container"); container.innerHTML(expenses[i].name); } const expenses = [ { name: "Electricity", amount: 700, recurring: true, }, { name: "Water", amount: 500, recurring: true, }, { name: "Internet", amount: 800, recurring: true, }, { name: "Rent", amount: 7500, recurring: true, }, { name: "Transport", amount: 1500, recurring: true, }, ]; for (i = 0; i < expenses.length; i++) { let container = document.getElementById("container"); container.innerHTML(expenses[i].name); }Y mi HTML también:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Incomes and Expenses</title> <script src="incomes.js"></script> <link rel="stylesheet" href="incomes.css" /> </head> <body> <h1 class="income">Incomes</h1> <div id="container" class="container"></div> </body> </html>Gracias
Probablemente desee ejecutar sus comandos de javascript después de cargar el html. Intente moverlo antes de cerrar la etiqueta <body> (ver más abajo). En este momento, se ejecuta antes de que se cree su elemento contenedor en el DOM.
... <script src="incomes.js"></script> </body> </html>