时间戳

首页 > 解决方案 > JavaScript 未按预期在 HTML 网站上显示

javascript - JavaScript 未按预期在 HTML 网站上显示

问题描述

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

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>

预期结果： 期待结果

标签： javascriptarrays

解决方案

编辑：

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

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

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

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

原答案：

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

如果您使用的是 Google Chrome 浏览器。Google 开发工具是在浏览器中对代码进行故障排除、测试和跟踪的必备工具。您可以在此处找到 Google Chrome 开发工具的介绍。

我怀疑您的 JS 文件不是名为 test_scores.js 或者与您的 HTML 文件不在同一位置。

要对此进行测试，我建议您尝试将 JS 直接加载到 HTML 文件中。要实现这一点，只需替换 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>

如果这不能解决它。另一个问题可能是您正在获取应用程序的缓存版本。尝试重新加载您的页面（清除缓存并重新加载），看看是否会有所不同。

推荐阅读