如何修复链接到 html 的无响应外部 javascript 文件

Question

我正在尝试使用 HTML 和（外部）JavaScript 为 class 项目创建交互时间 table。尽管遵循了讲师给出的代码，但单击单选按钮时 JavaScript 似乎没有响应。

这是为了在线托管 class 项目。我正在使用 HTML5、W3.CSS 和 JavaScript 创建页面。我已经针对此处列出的类似问题尝试了几种解决方案，例如将脚本标签移动到标签的顶部（和底部）。我也试过删除 head 标签但没有成功。

HTML代码：

<!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代码：

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 只是取自 w3schools 网站的模板。

我期望发生的是，当用户点击 "calculate" 按钮时：根据用户选择的数字生成时间 table，而 "reset" 是单击后，页面将重置，以便任何以前的时间 table 消失。

但是，当我点击这两个按钮中的任何一个时，没有任何反应。该功能工作正常，只是按钮不执行任何操作。

发生这种情况有什么特别的原因吗？ AFAIK，代码都是正确的，我唯一不同的是使用 W3.CSS，即使那样也不应该影响 Javascript。如果有人有任何解决方案，将不胜感激，谢谢！

Answer 1

您的问题是您的 <script> 标签（JavaScript 文件的 link）在 <style> 标签内，这意味着它被视为 CSS 而不是 HTML 标记。将 <script> 移到 <style> 之外，它应该可以工作：

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

如何修复链接到 html 的无响应外部 javascript 文件

How to fix unresponsive external javascript file linked to html

html

javascript

external

w3.css