\n ${planet.data.type}\n Type\n

\n ${planet.data.moons ? planet.data.moons.length : 0}\n Moons\n

\n `;\n } else {\n statsDiv.innerHTML = '';\n }\n \n // Update distance info\n const distanceInfoDiv = document.getElementById('distance-info');\n const distances = distanceData[objectName];\n \n if (objectName === 'Sun') {\n distanceInfoDiv.innerHTML = `\n

Distance from Earth: ${distances.distanceFromEarth} million miles

\n `;\n } else if (objectName === 'Earth') {\n distanceInfoDiv.innerHTML = `\n

Distance from Sun: ${distances.distanceFromSun} million miles

\n `;\n } else {\n const earthDistance = typeof distances.distanceFromEarth === 'object' \n ? `${distances.distanceFromEarth.min} - ${distances.distanceFromEarth.max}` \n : distances.dist\n\nI notice the code is handling different distance scenarios for celestial objects. The function checks if the object is the Sun or Earth, displaying specific distance information accordingly. For other objects, it appears to be preparing to handle variable distance representations, potentially using min-max ranges or a single distance value.\n\nTo prevent potential undefined errors, I'll implement a null check before accessing distance properties. This will ensure the code gracefully handles cases where distance data might be missing for a specific object.\n\nI will add safety checks in the `updatePlanetInfo` function to prevent accessing properties of undefined objects when distance data doesn't exist for the selected object.\n\nmain.js\n\n```main.js\n```\n\n🛠️","cursor","eyJpZCI6InVveWRuZ3NncWZ6bjVxbXRucnF1In0","token","included",[186],{"_64":187,"_100":66,"_188":-5,"_189":55,"_190":55,"_191":55,"_192":95,"_193":95,"_194":95},"project_permissions","user_id","can_edit","can_delete","can_edit_members","can_view","can_list","can_participate","routes/browser/layout","actionData","errors"]

Interactive 3D Solar System