JavaScript 在 HTML 站点上未按预期显示

Question

I am building an example in a book trying to learn JavaScript but for some reason it doesn't look like it reading the JS file when I run the html.我正在一本试图学习 JavaScript 的书中构建一个示例，但由于某种原因，当我运行 html 时，它看起来不像是在读取 JS 文件。 What am I missing?我错过了什么？ The HTML and CSS shows up just fine, but when I try to enter new values its doesn't do anything. HTML 和 CSS 显示得很好，但是当我尝试输入新值时，它什么也没做。 Its seems like its not reading the JS file.它似乎没有读取 JS 文件。 They are all in the same directory as well when ran.运行时它们也都在同一目录中。

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

 body { font-family: Arial, Helvetica, sans-serif; background-color: white; margin: 0 auto; padding: 10px 20px; width: 600px; border: 3px solid blue; } h1 { color: blue; margin-top: 0; margin-bottom: .5em; } h2 { color: blue; font-size: 120%; padding: 0; margin-bottom: .5em; } main { padding: 1em 2em; } label { float: left; width: 3em; text-align: right; } input { margin-left: 1em; margin-bottom: .5em; } p { margin: 0; } td { width: 10em; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test Score Array</title> <link rel="stylesheet" href="styles.css" /> <script src="test_scores.js"></script> </head> <body> <main> <h1>Use a Test Score array</h1> <label for="name">Name:</label> <input type="text" id="name"><br> <label for="score">Score:</label> <input type="text" id="score"><br> <label>&nbsp;</label> <input type="button" id="add" value="Add to Array"> <input type="button" id="display_results" value="Display Results"> <input type="button" id="display_scores" value="Display Scores"><br> <div id="results"></div> <table id="scores_table"></table> </main> </body> </html>

Expected Outcome:预期结果：

Answer 1

EDIT:编辑：

Upon closer inspection and learning about the exception message you're getting, you seem to be using jQuery and those jQuery selectors don't seem to be targeting valid html elements.仔细检查并了解您收到的异常消息后，您似乎正在使用 jQuery，而那些 jQuery 选择器似乎并未针对有效的 html 元素。

You need to make sure you're including the jQuery library (which you appear not to be doing) and that you're using the right syntax in your jQuery selectors, such as using $('#add') instead of $('add') and that elements have the corresponding Id associated to them.您需要确保包含 jQuery 库（您似乎没有这样做）并且您在 jQuery 选择器中使用了正确的语法，例如使用 $('#add') 而不是 $(' add') 并且该元素具有与其关联的相应 Id。 You have several problems like this in your code.您的代码中有几个这样的问题。

If you really want to use jQuery just add the '#' symbol before the name of each jQuery selector.如果您真的想使用 jQuery，只需在每个 jQuery 选择器的名称前添加“#”符号。 I've modified the code.我已经修改了代码。 Upload the updated JS to your js file (without the start and close tag) and try again.将更新的 JS 上传到您的 js 文件（没有开始和结束标记）并重试。

I suggest you don't use jQuery just now and replace the jQuery selector for vanilla JS (pure JS).我建议你现在不要使用 jQuery，而是将 jQuery 选择器替换为 vanilla JS（纯 JS）。 For that, instead replace every instance of $('...') with document.getElementById('...'), where ... is the name of your element's ID attribute.为此，将 $('...') 的每个实例替换为 document.getElementById('...')，其中 ... 是元素 ID 属性的名称。

Original answer:原答案：

With the provided information it's not possible to determine what the issue is.根据提供的信息，无法确定问题所在。 But you could try different things to find out.但是你可以尝试不同的东西来找出答案。

If you're using Google Chrome browser.如果您使用的是 Google Chrome 浏览器。 Google dev tools is a mandatory tool to troubleshoot, test and track your code in-browser.谷歌开发工具是在浏览器中排查、测试和跟踪代码的必备工具。 You can find an intro to Google Chrome Dev Tools here .您可以在此处找到 Google Chrome Dev Tools 的介绍。

I suspect that your JS file is either not called test_scores.js or is not in the same location as your HTML file.我怀疑您的 JS 文件不是名为 test_scores.js 或与您的 HTML 文件不在同一位置。

To test this, I suggest you try loading your JS directly in your HTML file.为了测试这个，我建议你尝试直接在你的 HTML 文件中加载你的 JS。 To achieve that just replace the line in your HTML file:要实现这一点，只需替换 HTML 文件中的行：

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

with the following:具有以下内容：

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

If this doesn't solve it.如果这样还不能解决。 Another issue could be that you're getting a cached version of your application.另一个问题可能是您正在获取应用程序的缓存版本。 Try hard reloading your page (clear cache and reload) and see if that makes a difference.尝试重新加载您的页面（清除缓存并重新加载），看看是否有所不同。

JavaScript 在 HTML 站点上未按预期显示

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-02-24 23:01:49

JavaScript 在 HTML 站点上未按预期显示

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-02-24 23:01:49

解决方案1
2 已采纳 2019-02-24 23:01:49