英文:
How to use an exported function in a script tag?
问题
我可以帮你翻译代码部分。以下是代码的翻译：
export function add(num1, num2) {
const errorMessage = "请输入有效的数字";
if (isNaN(num1) || isNaN(num2)) {
return errorMessage;
}
return num1 + num2;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="ISO-8859-1">
<title>示例</title>
<script type="module" src="file.js"></script>
</head>
<body>
<div>
<input type="number" id="num1" placeholder="第一个数字">
<input type="number" id="num2" placeholder="第二个数字">
<button onclick="addNumbers()">相加</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 = `加法结果: ${result}`;
}
</script>
</body>
</html>
希望这能帮助你解决问题！
英文:
How can I use my export function in my html script tag. I have marked the function as export so that I can use it in my Jasmine UnitTests. However, I can no longer use my function in my html script tag and get the following error message:
Uncaught ReferenceError: add is not defined
Is there any way I can solve or work around this problem?
My file.js:
export function add(num1, num2) {
const errorMessage = "Please enter a valid number";
if (isNaN(num1) || isNaN(num2)) {
return errorMessage;
}
return num1 + num2
}
My 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>
My Unittest:
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.");
});
});
});
If anyone has an answer I would be very pleased for a detailed response, thanks for any help!
答案1
得分: 2
Set type="module" on the script that uses the add function and import the function from file.js.
<script type="module">
import { add } from './file.js';
function addNumbers() {
// ...
}
document.querySelector('button').addEventListener('click', addNumbers);
</script>
英文:
Set type="module" on the script that uses the add function and import the function from file.js.
<script type="module">
import { add } from './file.js';
function addNumbers() {
// ...
}
document.querySelector('button').addEventListener('click', addNumbers);
</script>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论