代码之家 › 专栏 › 技术社区 › eXor420

如何在脚本标记中使用导出的函数?

export function html javascript

eXor420 · 技术社区 · 10 月前

如何在html脚本标记中使用导出功能。我已经将该函数标记为导出,以便在Jasmine UnitTest中使用它。但是,我不能再在html脚本标记中使用我的函数,并得到以下错误消息: Uncaught ReferenceError: add is not defined

有什么办法可以解决或解决这个问题吗?

我的 file.js 以下为:

export function add(num1, num2) {
    const errorMessage = "Please enter a valid number";
    if (isNaN(num1) || isNaN(num2)) {
        return errorMessage;
    }
    return num1 + num2
}

我的 index.html 以下为:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="ISO-8859-1">
    <title>Sample</title>
    <script type="module" src="file.js"></script>
</head>
<body>
<div>
    <input type="number" id="num1" placeholder="Erste Zahl">
    <input type="number" id="num2" placeholder="Zweite Zahl">
    <button onclick="addNumbers()">Addiere</button>
    <p id="additionResult"></p>
</div>

<script>

    function addNumbers() {
        const num1 = parseFloat(document.getElementById('num1').value);
        const num2 = parseFloat(document.getElementById('num2').value);
        const result = add(num1, num2)
        document.getElementById('additionResult').innerText = `Ergebnis der Addition: ${result}`;
    }
</script>
</body>
</html>

我的单元测试:

import {add} from '../file.js'

describe('MyTest', () => {

    beforeEach(() => {
    });

    describe("add Funktion", function () {
        it("sollte zwei Zahlen korrekt addieren", function () {
            expect(add(2, 3)).toEqual(5);
            expect(add(0, 0)).toEqual(0);
            expect(add(-1, 1)).toEqual(0);
        });

        it("sollte eine Fehlermeldung zurÃ¼ckgeben, wenn ungÃ¼ltige Eingaben gemacht werden", function () {
            expect(add("a", 2)).toEqual("Bitte geben Sie gÃ¼ltige Zahlen ein.");
            expect(add(1, "b")).toEqual("Bitte geben Sie gÃ¼ltige Zahlen ein.");
            expect(add("abc", "def")).toEqual("Bitte geben Sie gÃ¼ltige Zahlen ein.");
        });

        it("sollte eine Fehlermeldung zurÃ¼ckgeben, wenn eine Eingabe fehlt", function () {
            expect(add(2)).toEqual("Bitte geben Sie gÃ¼ltige Zahlen ein.");
            expect(add()).toEqual("Bitte geben Sie gÃ¼ltige Zahlen ein.");
        });
    });
});

如果有人有答案,我将非常高兴得到详细的回复,感谢您的帮助!

1 回复 | 直到 10 月前

Unmitigated 10 月前

设置 type="module" 在使用 add 函数,并从导入函数 file.js 。

<script type="module">
import { add } from './file.js';
function addNumbers() {
    // ...
}
document.querySelector('button').addEventListener('click', addNumbers);
</script>