1

me encuentro realizando un curso en udemy sobre javascript. En esta seccion estamos desarrollando un cotizador de criptomonedas y quien imparte el curso determino crear tres archivos, el app.js, api.js y ui.js En el archivo ui.js esta desarrollando la clase Interfaz con un metodo para mostrar un error si los dos campos estan vacios. Yo la clase la estoy instanciando en otro archivo y me marca un error diciendome que esa variable no esta definida.

adjunto codigo:

app.js

  const ui = new Interfaz();
  const formulario = document.getElementById('form');
  formulario.addEventListener('submit', (e)=>{

      e.preventDefault();
      const monedaUno = document.getElementById("monedaUno");
      const monedaUnoSeleccionada = monedaUno.options[monedaUno.selectedIndex].value;
      const monedaDos = document.getElementById("monedaDos");
      const monedaDosSeleccionada = monedaDos.options[monedaDos.selectedIndex].value;

      if(monedaUnoSeleccionada === '' || monedaDosSeleccionada === ''){

        ui.mostrarMensaje('Ambos campos deben ser completados', 'error');

      }else{

        console.log('Todo ok');

      }

  });

ui.js

class Interfaz{
  mostrarMensaje(mensaje, clases){

    const div = document.createElement('div');
    div.className = clases;
    div.appendChild(document.createTextNode(mensaje));
    const mensajes = document.getElementById('mensajes');

    mensajes.appendChild(div);
    setTimeout(()=>{div.remove()}, 2500);

  }
}

app1.js:1 Uncaught ReferenceError: Interfaz is not defined
at app1.js:1
(anonymous) @ app1.js:1
1
  • que tal si colocas la linea const ui = new Interfaz(); al final de tu archivo Commented el 10 jul. 2019 a las 20:11

1 respuesta 1

1

Eso es porque no estas exportando la clase Interfaz, y tampoco la estas importando en el otro archivo que necesitas, lo otro es que debes definir el tipo del script principal (El que esta referenciado en el html) de esta manera:

 <script type = "module" src = "archivo principal que importara las clases.js"></script>

Y en el archivo.js que tienes la clase Interfaz, la pones de la siguiente manera:

export default class Interfaz{

    //... El resto de código de tu clase

}

y en el archivo.js que necesites importarla haces lo siguiente arriba de todo el código:

 import Interfaz from './Ruta de la interfaz.js';

Cabe destacar dos cosas a la hora de la importación:

  1. Las importaciones siempre deben ocurrir antes de cualquier cosa, es decir es lo primero que debes poner en el código y las importaciones no pueden ir dentro de funciones (No trates de ponerlas por ejemplo dentro de window.onload).
  2. Si el archivo se encuentra en el mismo directorio es completamente necesario ese './' del inicio, ya que si no lo pones te marcara error.

Otra cosa, para correr tu archivo te recomiendo que descargues xampp, porque a la hora de definir el archivo javascript como tipo modulo solo correra con un server, puedes usar localhost, este viene con xampp.

1
  • 1
    Tambien la otra opción mas sencilla es mirar bien si si importaste en el html el otro script que contiene la clase y si fue la primera que importaste en el html en orden de arriba a abajo.
    – Layer
    Commented el 10 jul. 2019 a las 20:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.