JavaScript没有'；t在HTML站点上按预期显示

我在一本书中构建了一个示例，试图学习JavaScript，但由于某些原因，在运行html时它看起来不像是在阅读JS文件。我错过了什么？HTML和CSS显示得很好，但当我尝试输入新值时，它没有任何作用。它似乎没有读取JS文件。它们在运行时也都在同一个目录中

var name=[“本”、“乔”、“朱迪”、“安妮”]；
var得分=[88,98,77,88]；
var n=4；
变量大小=10；
var$=函数（id）{
返回文档.getElementById（id）；
};
函数addScore（）{
变量名称=$（'name'）。值；
变量得分=$（'score'）。值；
如果（名称=“”| |分数=“”| | isNaN（分数））警报（“无效数据”）；
否则如果（n<大小）{
名称[n]=名称；
分数[n]=分数；
n++；
}else警报（“阵列已满”）；
}
函数displayResults（）{
变量h，平均值，名称；
h=得分[0]；
名称=名称[0]；
平均值=0；
对于（z=0；z得分[0]）{
h=分数[z]；
名称=名称[z]
}
平均得分=平均得分+得分[z]；
}
平均值=平均值/无；
var con=“结果
平均分数=“+avg+”
最高分数=“+name+”，分数为“+h；
$（'results'）。innerHTML=con；
}
函数displayScores（）{
var con=“ScoresNameScore”；
对于（z=0；z
正文{
字体系列：Arial、Helvetica、无衬线字体；
背景色：白色；
保证金：0自动；
填充：10px 20px；
宽度：600px；
边框：3件纯蓝；
}
h1{
颜色：蓝色；
边际上限：0；
边缘底部：.5em；
}
氢{
颜色：蓝色；
字体大小：120%；
填充：0；
边缘底部：.5em；
}
主要{
填料：1米2米；
}
标签{
浮动：左；
宽度：3em；
文本对齐：右对齐；
}
输入{
左边距：1米；
边缘底部：.5em；
}
p{
保证金：0；
}
运输署{
宽度：10em；
}

测试分数数组
使用测试分数数组
姓名：


分数：




编辑：

仔细检查并了解您收到的异常消息后，您似乎正在使用jQuery，而那些jQuery选择器似乎没有针对有效的html元素

您需要确保包含了jQuery库（您似乎没有这样做），并且在jQuery选择器中使用了正确的语法，例如使用$（'#add'）而不是$（'add'），并且元素具有与之关联的相应Id。您的代码中有几个类似的问题

如果确实想使用jQuery，只需在每个jQuery选择器的名称之前添加“#”符号。我已经修改了代码。将更新的JS上载到JS文件（不带开始和结束标记），然后重试

我建议您现在不要使用jQuery，而是将jQuery选择器替换为vanilla JS（纯JS）。为此，请使用document.getElementById（“…”）替换$（“…”）的每个实例，其中。。。元素的ID属性的名称

原始答复：

根据提供的信息，无法确定问题是什么。但是你可以尝试不同的方法来找出答案

如果你使用的是谷歌浏览器。GoogleDevTools是在浏览器中排除故障、测试和跟踪代码的必备工具。你可以找到谷歌Chrome开发工具的介绍

我怀疑您的JS文件不是名为test_scores.JS，就是与HTML文件不在同一位置

为了测试这一点，我建议您尝试直接在HTML文件中加载JS。要实现这一点，只需替换HTML文件中的行：

<script src="test_scores.js"></script>



以下是：

<script>
var names = ["Ben", "Joel", "Judy", "Anne"];
var scores = [88, 98, 77, 88];
var n = 4;
var size = 10;
var $ = function(id) {
  return document.getElementById(id);
};

function addScore() {
  var name = $('#name').value;
  var score = $('#score').value;
  if (name == "" || score == "" || isNaN(score)) alert("Invalid data ");
  else if (n < size) {
    names[n] = name;
    scores[n] = score;
    n++;
  } else alert("Array already full");
}

function displayResults() {
  var h, avg, name;
  h = scores[0];
  name = names[0];
  avg = 0;
  for (z = 0; z < n; z++) {
    if (h > scores[0]) {
      h = scores[z];
      name = names[z]

    }
    avg = avg + scores[z];

  }
  avg = avg / n;
  var con = "<B>Results </b><br> Average Score= " + avg + "<br>Highest Score = " + name + " with a score of " + h;

  $('#results').innerHTML = con;
}

function displayScores() {
  var con = "<tr><td colspan='2'><h2>Scores</h2></td></tr><tr><td>Name</td><td>Score</td></tr> ";
  for (z = 0; z < n; z++) {
    con = con + "<tr><td>" + names[z] + "</td><td>" + scores[z] + "</td></tr>"

  }
  $('#scores_table').innerHTML = con;

}

window.onload = function() {
  $("#add").onclick = addScore;
  $("#display_results").onclick = displayResults;
  $("#display_scores").onclick = displayScores;
};
</script>


变量名称=[“本”、“乔”、“朱迪”、“安妮”]；
var得分=[88,98,77,88]；
var n=4；
变量大小=10；
var$=函数（id）{
返回文档.getElementById（id）；
};
函数addScore（）{
变量名称=$（'#名称'）。值；
变量得分=$（“#得分”）。值；
如果（名称=“”| |分数=“”| | isNaN（分数））警报（“无效数据”）；
否则如果（n<大小）{
名称[n]=名称；
分数[n]=分数；
n++；
}else警报（“阵列已满”）；
}
函数displayResults（）{
变量h，平均值，名称；
h=得分[0]；
名称=名称[0]；
平均值=0；
对于（z=0；z得分[0]）{
h=分数[z]；
名称=名称[z]
}
平均得分=平均得分+得分[z]；
}
平均值=平均值/无；
var con=“结果
平均分数=“+avg+”
最高分数=“+name+”，分数为“+h；
$（'#results'）。innerHTML=con；
}
函数displayScores（）{
var con=“ScoresNameScore”；
对于（z=0；z

如果这不能解决问题。另一个问题可能是您正在获取应用程序的缓存版本。尝试重新加载您的页面（清除缓存并重新加载），看看这是否会产生影响。
它在代码片段中工作正常，所以您的代码没有问题您在控制台中出错了吗？使用网络检查器检查文件是否已实际加载？我猜是因为文件：//mm。。抱歉，新开发我只是双击html文件，它弹出在谷歌上。我不知道如何克服这个困难。对不起，我是新来的。“它在谷歌上弹出”错误消息与您的代码不匹配（第11行没有
n
）。确保浏览器正在运行代码的当前版本。清除浏览器缓存并重试此方法有效，但我仍然不明白发生了什么。该文件名为test_scores.js，与css/html文件位于同一目录中。使用时