Problem z JavaScript w HTML

pytanie zadane 20 maja 2019 w HTML i CSS przez Dogy Użytkownik (520 p.)

Witam! Mam następujący problem. Zrobiłem przycisk, po naciśnięciu jego powinny pokazać się słowa "Hello World", lecz gdy daje to do JS nie działa, a gdy daje w <script> działa poniżej kod

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Strona K.J</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,900&subset=latin-ext" rel="stylesheet">
    <link rel="stylesheet" href="style.css">

</head>

<body>
    <div class="wrapper">    
    <header>
        <img src="NaGlowe1.png">
    </header>
    
    <nav>
        <a class="menu active" href="index.html">Strona Główna</a><a class="menu" href="Polski.html">Praca Polski</a><a class="menu" href="#">[Puste]</a><a class="menu" href="#">[Puste]</a>
        <a class="menu" href="#">[Puste]</a><a class="menu" href="#">[Puste]</a><a class="menu" href="#">[Puste]</a><a class="menu" href="#">[Puste]</a>
    </nav>
  
    

    <button onclick="myFunction()">Click me</button>
    <p id="demo"></p>
    
    <script type="plik.js">
    </script>
    
    <footer>
    </footer>
    </div>
</body>

A to działa poniżej

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Strona K.J</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,900&subset=latin-ext" rel="stylesheet">
    <link rel="stylesheet" href="style.css">

</head>

<body>
    <div class="wrapper">    
    <header>
        <img src="NaGlowe1.png">
    </header>
    
    <nav>
        <a class="menu active" href="index.html">Strona Główna</a><a class="menu" href="Polski.html">Praca Polski</a><a class="menu" href="#">[Puste]</a><a class="menu" href="#">[Puste]</a>
        <a class="menu" href="#">[Puste]</a><a class="menu" href="#">[Puste]</a><a class="menu" href="#">[Puste]</a><a class="menu" href="#">[Puste]</a>
    </nav>
  
    

    <button onclick="myFunction()">Click me</button>
    <p id="demo"></p>
    
<script>
    	function myFunction() {
  	      document.getElementById("demo").innerHTML = "Hello World";
	}
</script>
    
    <footer>
    </footer>
    </div>
</body>