如何分离 HTML 和 Javascript

Question

我现在正在研究 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 文件中时，事件侦听器不再工作......那么有可能将它分开吗？

问候，--技术

Answer 1

将所有 Javascript 代码放在单独的myScriptFile.js文件中。 在 HTML 中包含<body>标签末尾的脚本，如下所示：

<html>
  <head></head>
  <body>
    <script src='/path/to/myScriptFile.js'></script>
  </body>
</html>

Answer 2

当您使用内联 javascript 时，文档正在呈现，因此如果您通过脚本标记之前存在的 ID 引用元素，则该元素可能已经注册，这就是您可以为其附加事件侦听器的原因。 当您链接外部 javascript 文件时，它通常会在呈现文档之前加载，因此该元素尚不存在。 要解决此问题，只需在文档加载后运行将事件侦听器附加到文档元素的代码。

请参阅相关问题： Best way of unobtrusive onload in plain javascript

如何分离 HTML 和 Javascript

问题描述

2 个解决方案

解决方案1
3 已采纳 2020-02-14 18:14:51

解决方案2
0 2020-02-14 18:21:02

如何分离 HTML 和 Javascript

问题描述

2 个解决方案

解决方案1 3 已采纳 2020-02-14 18:14:51

解决方案2 0 2020-02-14 18:21:02

解决方案1
3 已采纳 2020-02-14 18:14:51

解决方案2
0 2020-02-14 18:21:02