How to separate HTML and Javascript

Question

I am styding JS right now. I need to get the HTML and JS as many as possible getting seperated. So that everything is in a HTML and a loose JS file. 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?

Greetings, --Tech

Did you check was the js file loaded to the document? You should also show the code which doesn't work instead of a working snippet. — Teemu
– Teemu, Commented Feb 14, 2020 at 18:11
It looks like your <script> tag was mistakenly placed inside the <title> tag — Sean
– Sean, Commented Feb 14, 2020 at 18:25

curtisupshall · Accepted Answer · 2020-02-14 18:14:51Z

3

Place all your Javascript code in seperate myScriptFile.js file. Include the script at the end of your <body> tag in your HTML like so:

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

answered Feb 14, 2020 at 18:14

curtisupshall

3963 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ralph Ritoch · Accepted Answer · 2020-02-14 18:21:02Z

0

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. 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. 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

answered Feb 14, 2020 at 18:21

Ralph Ritoch

3,50030 silver badges42 bronze badges

Collectives™ on Stack Overflow

How to separate HTML and Javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related