我正在为JS设计样式。我需要使HTML和JS尽可能分开。这样所有内容都在HTML和一个松散的JS文件中。我该如何分开：
<!DOCTYPE html>
<html>
<head>
<title>Inzendopgave 242S2 - F.W.J.C. de Graaff
<script async src="script.js"></script>
</title>
</head>
<body>
<h2>Inzendopgave 242S2 - F.W.J.C. de Graaff</h2><br/>
<p>Voer uw bedragen in:<br/></p>
<input type="text" id="invoer1">
<script>
//Maak een globale variabele:
const bedrag = document.getElementById("invoer1");
//Voeg er een event-listener aan toe:
bedrag.addEventListener("keyup", function(event) {
//Alleen triggeren als de Enter-toets wordt gedrukt:
if (event.key === "Enter") {
//Dan voer het volgende script uit:
//Maar een Block variabele en geef deze de waarde van de ingevoerde string:
let uitkomst = document.getElementById("afvoer2").innerHTML;
//Tel de invoer bij de uitkomst op en maak van de strings integers (getallen):
document.getElementById("afvoer2").innerHTML = parseInt(uitkomst) + parseInt(bedrag.value);
//Maak invoerveld weer leeg:
bedrag.value = "";
//Sluit alle nog openstaande regels/tags:
}
}
)
//Puntkomma om de event-listener te sluiten:
;
</script>
<h3>Uw ingevoerde totaal:</h3><br/>
<div id="afvoer2">0</div>
</body>
</html>
</code>
当我将脚本标签中的所有内容都保存并保存到单独的js文件中时，事件监听器不再起作用了……完全可以将其分开吗？
问候，-技术
将所有Javascript代码放在单独的myScriptFile.js文件中。像这样，在HTML的<body>标记末尾包含脚本：
<html>
<head></head>
<body>
<script src='/path/to/myScriptFile.js'></script>
</body>
</html>
[当您使用嵌入式JavaScript时，文档正在呈现，因此，如果您通过script标记之前的ID引用元素，则该元素可能已经被注册，这就是为什么您可以将事件侦听器附加到它的原因。链接外部javascript文件时，通常会在呈现文档之前加载该文件，因此该元素尚不存在。要解决此问题，只需在文件加载后运行将事件侦听器附加到文档元素的代码即可。