Question

新手JSer在这里。我正在尝试使每次加载网站页面时都出现一个新短语。但是，当我重新加载页面时，该短语不会出现。

var phrases = [
  'Phrase one',
  'Phrase two',
  'Phrase three'
]

function newPhrase() {
  var num = Math.floor(Math.random() * (phrases.length));
  document.getElementById('phrase').innerHTML = phrases[num];
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>StickComs: Free Comics for Everyone</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Stylesheets -->
  <link rel="stylesheet" type="text/css" href="main.css">
    <!-- Bootstrap: Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <!-- Bootstrap: jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Bootstrap: Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <!-- Bootstrap: Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <!-- Google font: Roboto -->
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>


<body onload="newPhrase()">
  <!-- Phrase Banner -->
  <div class="container-fluid" id="phrase-banner">
    <p id="phrase">
      <!-- Phrases display here -->
    </p>
    <script src="generator.js"></script>
  </div>


</body>
</html>

Answer 1

我不想编辑OP的答案，所以这里是可运行格式的代码。似乎可以在这里工作，所以我敢冒险可能不会加载generator.js文件。

首先在开发人员工具中检查网络请求，然后查看它是否成功加载。

第二，如果该脚本已加载，那么由于您正在为主体使用onload事件，因此该脚本可能已加载，但在该事件尝试执行该功能之前尚未被解析和执行（尽管我认为应该导致报告错误。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>StickComs: Free Comics for Everyone</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Stylesheets -->
  <link rel="stylesheet" type="text/css" href="main.css">
    <!-- Bootstrap: Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <!-- Bootstrap: jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Bootstrap: Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <!-- Bootstrap: Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <!-- Google font: Roboto -->
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>


<body onload="newPhrase()">
  <!-- Phrase Banner -->
  <div class="container-fluid" id="phrase-banner">
    <p id="phrase">
      <!-- Phrases display here -->
    </p>
    <script>
      var phrases = [
        'Phrase one',
        'Phrase two',
        'Phrase three'
      ]

      function newPhrase() {
        var num = Math.floor(Math.random() * (phrases.length));
        document.getElementById('phrase').innerHTML = phrases[num];
      }
    </script>
  </div>


</body>
</html>

Answer 2

使用这种方式在您的简单html页面中运行JavaScript，将generator.js修改如下：

 let phrases = [
     'Phrase one',
     'Phrase two',
     'Phrase three'
 ]

 function newPhrase() {
    var num = Math.floor(Math.random() * (phrases.length));
    document.getElementById('phrase').innerHTML = phrases[num];
 }
window.onload = newPhrase;

并删除

onload="newPhrase()"

在body标签中，因为它实际上根本无法工作。

为什么这个简单的Javascript代码无法在我的网站上运行？

2 个答案: