我有 3 个文件 - 两个 HTML，一个 JS（普通）。文件 #1 从 JS 文件导入脚本。但是，我还需要将变量从 JS 文件导出到文件#2，当我添加代码行来执行此操作时，所有脚本都不起作用。同样，导入变量也会破坏代码。去掉导入和导出，代码在其他方面工作得很好。
我不太确定问题到底是什么，因为没有错误消息。
Arrangement.JS 是 JS 脚本。我将脚本导入到 Arrangement.HTML，并将变量导入到 Doors.HTML。
导入JS脚本：
<script src="./ArrangementJS.js">
导出变量：
let puzzle4 = 0
export { puzzle4 }
导入变量：
import { puzzle4 } from './ArrangementJS.js
我尝试在网上查找，但没有任何内容真正符合我的问题，并且导出语法似乎是正确的。
我确实在某个地方看到它应该说该类型是一个模块，所以我尝试添加它，但它不起作用，即使没有导出：
<script type="module" src="./ArrangementJS.js">
Arrangement.html 代码：（不包括 css，认为不相关）
<!DOCTYPE html>
<html>
<body>
<div id="everything">
<div id="tiles">
<input type="image" onclick="turn1" class="tile" id="r1" src="ag.png"></input>
<input type="image" onclick="turn2" class="tile" id="r2" src="ak.png"></input>
<br>
<input type="image" onclick="turn3" class="tile" id="r3" src="ai.png"></input>
<input type="image" onclick="turn3" class="tile" id="r4" src="an.png"></input>
<br></div>
<a href="Doors.html"><img id="backarrow" src="https://iili.io/JNYbdzJ.png"></a>
</div>
<script src="./ArrangementJS.js">
</script>
</body>
</html>
ArrangementJS.js 代码：
let puzzle4 = 0
//export { puzzle4 }
bt1 = document.getElementById("r1")
ang1 = 0
r1.onclick = function turn1 () {
ang1 -= 45;
if (ang1 === -360) { ang1 = 0; };
document.getElementById("r1").style.transform = "rotate("+ang1+"deg)";
}
bt2 = document.getElementById("r2")
ang2 = 0
r2.onclick = function turn2 () {
ang2 -= 45;
if (ang2 === -360) { ang2 = 0; };
document.getElementById("r2").style.transform = "rotate("+ang2+"deg)";
}
bt3 = document.getElementById("r3")
ang3 = 0
r3.onclick = function turn3 () {
ang3 -= 45;
if (ang3 === 360) { ang3 = 0; };
document.getElementById("r3").style.transform = "rotate("+ang3+"deg)";
}
bt4 = document.getElementById("r4")
ang4 = 0
r4.onclick = function turn4 () {
ang4 -= 45;
if (ang4 === -360) { ang4 = 0; };
document.getElementById("r4").style.transform = "rotate("+ang4+"deg)";
}
var tiles = document.getElementsByClassName("tile");
for (var i = 0; i < tiles.length; i++) {
tiles[i].addEventListener('click', function() {
if (ang1 == -90 && ang2 == -315 && ang3 ==-90 && ang4 == -225) {
alert("You have completed puzzle four.")
}})}
Doors.html 的代码：（同样，没有 css。警报是为了查看导入是否有效，然后查看脚本是否仍然有效）
<!DOCTYPE html>
<html>
<head>
<title>Blessing | A Puzzle Game</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet">
<meta name="viewport" content="width=900, height=506, initial-scale=1.0, maximum-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:[email protected]&display=swap" rel="stylesheet">
</head>
<body>
<div id="everything">
<audio controls autoplay loop>
<source src="Blessing_BG_music.mp3" type="audio/mpeg" />
</audio>
<div id="d">
<a href="Passcode.html"> <img src="door1.png" id="door1"></a>
<a href="Riddle.html"> <img src="door2.png" id="door2"></a>
<a href="Seqence.html"> <img src="door3.png" id="door3"></a>
<a href="Arrangement.html"> <img src="door4.png" id="door4"></a>
</div>
<a href="gods.html"><img id="backarrow" src="https://iili.io/JNYbdzJ.png"></a>
</div>
</body>
</html>
<script type="module">
//import { puzzle4 } from './Arrangement.js'
//alert("hi");
var d3 = document.getElementById("door3")
if (puzzle3 == 1) {
d3.style.display=none;
} else {
d3.style.display=inline;
}
</script>
如果没有看到完整的代码，很难说，我不知道“导入是脚本”这行意味着什么：
<script src="./ArrangementJS.js">
如果该行位于您要从中导入变量的文件中，则您不会使用标签包含脚本。
您正在使用 module 关键字，但该关键字只能在执行实际导入的脚本中使用，而应在脚本中包含整个 js 文件。
因此，无论您想从中导入变量，只需添加某种脚本，如下所示：
<Script type="module">
import { puzzle4 } from './ArrangementJS.js'
</Script>
此外，您原来的导入语句末尾缺少 ' 字符，这会导致语法错误。
不要使用 type=module 导入模块本身；相反，使用该类型的脚本来进行导入。