首页 > 解决方案 > 如何定义包含要在 HTML 中执行的方法的 JS 文件

问题描述

我正在处理我在互联网上发现的一个项目示例,并且我试图知道如何onclick从一个中调用一个简单的方法button。我尝试将其声明为:

HTML

        <button id="bt_connect" src="./js/example.js" onclick="mqtt_sub();">MQTT CONNECTION</button>

调用function我在./js/example.js

function mqtt_sub() {
var mqtt = require('mqtt');
var client = mqtt.connect("url:1883"); // URL:port
var topic = 'testingtopic'

client.on('message', (topic, message) => {
    message = message.toString();
    console.log(message);
});

client.on('connect', () => {
    client.subscribe(topic);
    console.log("Connected!")
})

}

错误

未捕获的 ReferenceError:mqtt_sub 未在 HTMLButtonElement.onclick 中定义

我知道我可以在HTML文件中定义脚本,但我无法执行require()

我想知道的是我的代码是否错误,或者它应该是这样的。我想仔细检查一下是否需要查看我的代码,或者我只是误解了我的项目结构。

标签: javascripthtmlonclick

解决方案


按钮元素没有 src 属性。如果要从按钮调用 onclick 方法,则需要调用 JS 文件本身中定义的函数。

为了让它识别这个方法,你可以在结束 body 标签之前的 script 标签内添加 JS 文件。

<html>
  <head>...</head>
  <body>
   ....
  <script src="your_src"></script>
  </body>
 </html>

推荐阅读