Question

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

这是用于在线托管的班级项目。我正在使用HTML5，W3.CSS和JavaScript创建页面。对于此处列出的类似问题，我已经尝试了几种解决方案，例如将script标签移动到标签的顶部（和底部）。我也尝试过删除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网站获取的模板。

我希望发生的事情是，当用户单击“计算”按钮时：将根据用户选择的号码生成时间表，并且在单击“重置”时，将重置页面，以便以前的时间表消失了。

但是，当我单击这些按钮中的任何一个时，什么都没有发生。该功能可以正常工作，只是按钮什么都不做。

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

Answer 1

您的问题是您的<script>标记（指向JavaScript文件的链接）位于<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文件

1 个答案: