tengo 3 archivos
Estoy copiando solo una pequeña parte del código aquí.
Connection.js tiene una clase
import {net} from 'net'; export class connect { Testfunction() {return "something"} }main.html tiene una función
<html> <head> <script src= 'Connections.js'></script> <script src= 'ScriptFile.js'></script> </head> <body> <p id="demo" onclick="myFunction()">Click me to change my text color.</p> </body> </html>ScriptFile.js
import { connect } from "./Connections.js"; const ObjConnect = new connect() function myFunction() { document.getElementById("demo").innerHTML = ObjConnect.Testfunction(); }¿Cómo hago que el "texto" en mi archivo html cambie a "algo" cuando hago clic en él?
Primero tiene un error tipográfico en el nombre del archivo. Es Conexión, no Conexiones en main.js
Caso 1. utilizando el módulo
<html> <head> <script type="module" src="Connection.js"></script> <script type="module" src="ScriptFile.js"></script> </head> <body> <p id="demo">Click me to change my text color.</p> </body> </html> import { connect } from './Connection.js'; const ObjConnect = new connect(); function myFunction() { document.getElementById('demo').innerHTML = ObjConnect.Testfunction(); } document.getElementById('demo').addEventListener('click', myFunction);Caso2. usando secuencia de comandos
<html> <head> <script src="Connection.js"></script> <script src="ScriptFile.js"></script> </head> <body> <p id="demo" onclick="myFunction()">Click me to change my text color.</p> </body> </html> class connect { Testfunction() { return 'something'; } } const ObjConnect = new connect(); function myFunction() { document.getElementById('demo').innerHTML = ObjConnect.Testfunction(); }