处理JS类在html文件中的import语句?

我有3个文件。

Connections.js
Main.html。
ScriptFile.js

这里我只复制了一小部分代码。

Connection.js有一个类

import {net} from 'net';
export class connect {
Testfunction() {return "something"}
}

main.html有一个函数

<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();
}

如何制作"text"在我的HTML文件中更改为"something"当我点击它的时候?

首先在文件名上有一个错别字。这是连接，而不是连接在main.js

Case1。使用模块

main.html

<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>

ScriptFile.js

import { connect } from './Connection.js';
const ObjConnect = new connect();
function myFunction() {
document.getElementById('demo').innerHTML = ObjConnect.Testfunction();
}
document.getElementById('demo').addEventListener('click', myFunction);

例2。使用脚本

main.html

<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>

Connection.js

class connect {
Testfunction() {
return 'something';
}
}

ScripFile.js

const ObjConnect = new connect();
function myFunction() {
document.getElementById('demo').innerHTML = ObjConnect.Testfunction();
}

相关内容

最新更新

热门标签：