I have 3 files.
I am copying only small part of the code here.
Connection.js has a class
import {net} from 'net';
export class connect {
Testfunction() {return "something"}
}
main.html has a function
<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();
}
How do I make "text" in my html file to change to "something" when I click on it?
First you have a typo at file name.
It's Connection, not Connections in main.js
Case1. using module
<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);
Case2. using script
<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();
}