无法在 HTML 中访问外部 JS 函数

Question

Hello i tried to programm my own GUI with HTML and JS for my Philips Hue Lights with huejay ( https://github.com/sqmk/huejay ).您好，我尝试使用 Huejay ( https://github.com/sqmk/huejay ) 为我的飞利浦 Hue Lights 使用 HTML 和 JS 为我自己的 GUI 编程。

When i try to use the JS function "LightOn()" from my main.js on a button in my HTML file there is an error: "Uncaught ReferenceError: LightOn is not defined onclick file:///C:/Users/noName/Desktop/Hue/index.html:1"当我尝试在 HTML 文件中的按钮上使用 main.js 中的 JS 函数“LightOn()”时，出现错误：“未捕获的 ReferenceError：LightOn 未定义 onclick file:///C:/Users/noName /Desktop/Hue/index.html:1"

When i use the exact code for "Message()" from message.js it works correctly.当我使用 message.js 中“Message()”的确切代码时，它可以正常工作。

I converted let huejay = require('huejay');我转换了let huejay = require('huejay'); to import { huejay } from "huejay"; import { huejay } from "huejay"; is this correct?这样对吗？ I know there is a problem with the import huejay in main.js but i dont know how to handle it correctly.我知道 main.js 中的 importhuejay 有问题，但我不知道如何正确处理它。 I tried to set type="module" at the Tag.我试图在标签上设置 type="module"。

When i run the code manually from terminal everything works fine an my light turns on.当我从终端手动运行代码时，一切正常，我的灯亮了。

Please help ...请帮忙 ...

Here is my code:这是我的代码：

index.html索引.html

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Hue Lights</title>
  </head>
  <body>
    <script type="module" src="main.js"></script>
    <button onclick="LightOn()">Light On!</button>

    <script type="text/javascript" src="message.js"></script>
    <button onclick="Message()">TEST</button> 
  </body>
</html>

main.js主文件

import { huejay } from "huejay";

function LightOn() {

    // Client settings
    let client = new huejay.Client({
        host: '123.0.12.34',
        port: 80,               // Optional
        username: 'bridgeusername', // Optional
        timeout: 15000,            // Optional, timeout in milliseconds (15000 is the default)
    });

    // Test connection to the bridge
    client.bridge.ping()
        .then(() => {
            console.log('Successful connection');
        })
        .catch(error => {
            console.log('Could not connect');
        });

        // Test authentication to the bridge
        client.bridge.isAuthenticated()
  .then(() => {
    console.log('Successful authentication');
  })
  .catch(error => {
    console.log('Could not authenticate');
  });

  // Get bridge details and configuration
  client.bridge.get()
  .then(bridge => {
    console.log(`Retrieved bridge ${bridge.name}`);
    console.log('  Id:', bridge.id);
    console.log('  Model Id:', bridge.modelId);
    console.log('  Model Name:', bridge.model.name);
  });

// Save a light's attributes and state
  client.lights.getById(1)
  .then(light => {
    light.name = 'Living room';

    light.on = 1;
    light.brightness = 254;
    light.hue        = 32554;
    light.saturation = 254;

    return client.lights.save(light);
  })
  .then(light => {
    console.log(`Updated light [${light.id}]`);
  })
  .catch(error => {
    console.log('Something went wrong');
    console.log(error.stack);
  });

}

message.js消息.js

function Message() {
    alert('External JS loaded');
}

Answer 1

Add export in front of LightOn():在 LightOn() 前面添加导出：

export function LightOn()

Read more: https://medium.com/backticks-tildes/introduction-to-es6-modules-49956f580da阅读更多： https : //medium.com/backticks-tildes/introduction-to-es6-modules-49956f580da

无法在 HTML 中访问外部 JS 函数

问题描述

1 个解决方案

解决方案1
0 2020-09-25 07:16:14

无法在 HTML 中访问外部 JS 函数

问题描述

1 个解决方案

解决方案1 0 2020-09-25 07:16:14

解决方案1
0 2020-09-25 07:16:14