如何分离 HTML 和 Javascript
[英]How to separate HTML and Javascript
问题描述
I am styding JS right now.
我现在正在研究 JS。 I need to get the HTML and JS as many as possible getting seperated.我需要尽可能多地分离 HTML 和 JS。 So that everything is in a HTML and a loose JS file.这样一切都在一个 HTML 和一个松散的 JS 文件中。 How do I seperate this:我如何分开这个：
<!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>
When I place everything that is inside the script-tags and save that to a seperate js-file, the event-listener doesn't work anymore... Well is it possible at all to separate it?当我将所有内容放在脚本标签中并将其保存到单独的 js 文件中时，事件侦听器不再工作......那么有可能将它分开吗？
Greetings, --Tech问候，--技术
2 个解决方案
解决方案1
3 已采纳 2020-02-14 18:14:51
Place all your Javascript code in seperate myScriptFile.js file.将所有 Javascript 代码放在单独的myScriptFile.js文件中。 Include the script at the end of your <body> tag in your HTML like so:在 HTML 中包含<body>标签末尾的脚本，如下所示：
<html>
<head></head>
<body>
<script src='/path/to/myScriptFile.js'></script>
</body>
</html>
解决方案2
0 2020-02-14 18:21:02
When you use inline javascript the document is rendering so if you reference an element by ID that existed before the script tag the element has likely already been registered which is why you can attach an event listener to it.当您使用内联 javascript 时，文档正在呈现，因此如果您通过脚本标记之前存在的 ID 引用元素，则该元素可能已经注册，这就是您可以为其附加事件侦听器的原因。 When you link an external javascript file it will typically be loaded before the document is rendered and therefore the element doesn't exist yet.当您链接外部 javascript 文件时，它通常会在呈现文档之前加载，因此该元素尚不存在。 To resolve this problem simply have your code which attaches event listeners to the document elements run after the document has loaded.要解决此问题，只需在文档加载后运行将事件侦听器附加到文档元素的代码。
See related issue: best way of unobtrusive onload in plain javascript请参阅相关问题： Best way of unobtrusive onload in plain javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.