Estoy tratando de definir una clase en un archivo javascript separado y luego usar esa clase en mi archivo HTML.
Esto es lo que estoy intentando.
class VoiceCard { constructor(nickname, date_time, post_title, voice_post) { this.nickname = nickname; this.date_time = date_time; this.post_title = post_title; this.voice_post = voice_post; } <!DOCTYPE html> <html lang="en"> <head> <title>Example</title> <meta charset="utf-8"> <script type="module" src="../VoiceCard.js"></script> </head> <!DOCTYPE html> <html lang="en"> <head> <title>Example</title> <meta charset="utf-8"> <script type="module" src="../VoiceCard.js"></script> </head> <body> <script type="text/javascript"> let v_card = new VoiceCard( "Lorder", "12:00", "First Voicer Post", "file_location.mp4"); console.log(v_card.nickname); </script> </body> </html>El error es: Error de referencia no detectada: la tarjeta de voz no está definida.
Parece que no puedo encontrar la razón del error. Cualquier ayuda sería apreciada.
Los módulos no crean globales. Esa es la mayor parte del punto de ellos. :-)
He aquí cómo hacer lo que parece que quieres hacer:
Elimine la etiqueta de secuencia de script para VoiceCard.js .
En VoiceCard.js , exporte la clase agregando export delante de class .
Cambie su secuencia de comandos en línea a un módulo en línea que importa la clase del archivo VoiceCard.js .
Asi que:
export class VoiceCard { // ^^^ constructor(nickname, date_time, post_title, voice_post) { this.nickname = nickname; this.date_time = date_time; this.post_title = post_title; this.voice_post = voice_post; } } // <== This closing `}` was missing <!DOCTYPE html> <html lang="en"> <head> <title>Example</title> <meta charset="utf-8"> <!-- No script tag for VoiceCard --> </head> <body> <script type="module"> import { VoiceCard } from "../VoiceCard.js"; // *** let v_card = new VoiceCard( "Lorder", "12:00", "First Voicer Post", "file_location.mp4" ); console.log(v_card.nickname); </script> </body> </html> El navegador descargará VoiceCard.js automáticamente cuando vea la import .
Puede eliminar type="module" para solucionar este problema
<!DOCTYPE html> <html lang="en"> <head> <title>Example</title> <meta charset="utf-8"> <script src="../VoiceCard.js"></script> </head> <body> <script type="text/javascript"> let v_card = new VoiceCard( "Lorder", "12:00", "First Voicer Post", "file_location.mp4"); console.log(v_card.nickname); </script> </body> </html>