如何分離 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