How to fix unresponsive external javascript file linked to html

I'm trying to create an interactive time table using HTML and (external) JavaScript for a class project. Despite following the code given by my lecturer, the JavaScript doesn't seem to respond when the radio buttons are clicked on.

This is for a class project to be hosted online. I'm creating the page using HTML5, W3.CSS and JavaScript. I've tried several solutions for similar problems listed on here, such as moving the script tag to the top (and bottom) of the tag. I've also tried removing the head tag with no success.

HTML code :

<!DOCTYPE html>
<html lang="en">
<head>
<title>Times Tables</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/w3.css">
<link rel="icon" type="image/png" href="images/icon.png">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Arial", sans-serif}
.w3-bar,h1,button {font-family: "Verdana", sans-serif}
<script type="text/javascript" src="jScripts/TimeTableFile.js"></script>
</style>
</head>
<body>

<!-- Header -->
<header class="w3-container w3-light-blue w3-center" style="padding:64px 16px">
  <h1 class="w3-margin w3-xlarge">Times Tables</h1>
</header>

<!-- First Grid -->
<div class="w3-row-padding w3-padding-64 w3-container w3-pale-yellow">
<div class="w3-content">
<table>
<tr>
<td>Pick a number</td>
<td>
<select id="mySelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
</td>
</tr>
<tr>
<td><input type="button" id="reset" value="Clear"></input></td>
<td><input type="button" id="calc" value="Calculate"></input></td>
</tr>
</table>
<hr>
        <table>         
            <tr>
                <td colspan="2" id="tables"></td>
            </tr>
        </table>
        <hr>
  </div>
</div>
<!-- Footer -->
<footer class="w3-container w3-padding-32 w3-center w3-deep-purple">  
  <div class="w3-xlarge w3-padding-16">
 </div>
 <h6>
    &copy; 2019
 </h6>
 <h6>Website template by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></h6>
</footer>

<script>
// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
  var x = document.getElementById("navDemo");
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else { 
    x.className = x.className.replace(" w3-show", "");
  }
}
</script>

</body>
</html>

JavaScript code:

var $ = function(id){
    return document.getElementById(id);
};
var ResetTextfields = function(){
    $("tables").innerHTML ="Please select a number to generate tables";
};
var calculate = function(){
    var number = parseInt($("mySelect").value);
    if(isNaN(number))
        alert("Please select a number from the list");
    else{
        var res = "The "+number+" times tables:<br>";
        for(var i=1; i<=number; i++)
            res+=number+"x "+i+" = "+(number*i)+"<br>";
        $("tables").innerHTML =res;
    }
};
window.onload = function(){
    $("calc").onclick = function(){calculate();}
    $("reset").onclick = function(){ResetTextfields();}
};

W3.CSS is just a template taken from the w3schools website.

What I expect to happen is that when the user clicks on the "calculate" button: a time table is generated based on what number the user picks, and when "reset" is clicked on, the page is reset so that any previous time table disappears.

However, when I click on either of these buttons, nothing happens. The function works fine, it's just the buttons don't do anything.

Is there any particular reason why this is happening? AFAIK, the code's all correct, the only thing that I'm doing differently is using W3.CSS, which even then shouldn't effect the Javascript. If anybody has any solutions it'd be much appreciated, thanks!

Solution

Your issue was your <script> tag (the link to your JavaScript file) was inside the <style> tag, which meant it was being treated as CSS rather than HTML markup. Move the <script> outside the <style> and it should work:

<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Arial", sans-serif}
.w3-bar,h1,button {font-family: "Verdana", sans-serif}
</style>
<script type="text/javascript" src="jScripts/TimeTableFile.js"></script>