Question

我是Java的新手，我按照教程创建了一个随机报价生成器：https://medium.freecodecamp.org/creating-a-bare-bones-quote-generator-with-javascript-and-html-for-absolute-beginners-5264e1725f08

但是，当您单击“新报价”按钮时，该按钮不显示报价。什么都没发生。

我认为问题是我没有正确引用具有引号数组的javascript.js文件。 index.html和javascript.js在一个文件夹中处于同一级别，为简单起见，我将javascript函数newQuote（）移到了HTML文件中。

index.html：

<!DOCTYPE HTML>
<html>
<head>
    <title>Funny Quote Gen</title>

    <script src="javascript.js">
        function newQuote() {
            var randomNumber = Math.floor(Math.random() * (quotes.length()));
            document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
        }
    </script>
</head>

<body>
    <h1>Simple Funny Quote Generator</h1>

    <div id="quoteDisplay">
        <!-- Quotes will display here! -->
    </div>

    <button onclick="newQuote()">New Quote</button>
</body>
</html>

javascipt.js：

var quotes [
    'Do not take life too seriously. You will never get out of \it alive. - Elbert Hubbard',
    'May the forces of evil become confused on the way to your house. - George Carlin',
    'Laziness \is nothing more than the habit of resting before you get tired. - Jules Renard', 
    'There can not be a crisis next week. My schedule \is already full. - Henry Kissinger',
    'My life needs editing. - Mort Sahl',
    'I always wanted to be somebody, but now \I realize \I should have been more specific. - Lily Tomin',
    'If at first you don\'t succeed, find out \if the loser gets anything. - William Lyon Phelps',
    'You\'re only as good as your last haircut. - Fran Lebowitz'
]

Answer 1

您有2种可能的解决方案。

按照您现有教程的说明，在另一个脚本标签上引用您的javascript.js文件。关闭正文标签之前，请参见最后一行，例如<script src="javascript.js"></script>。

OR

将所有javascript代码都放在一个脚本标签下，例如-但首先可以解决您现有的一些错误-
- 从length属性中删除括号()，因为它不是函数。
- 修复quotes等var quotes = [your long array values will goes here]等数组。您在这里错过了=

<!DOCTYPE HTML>
<html>

<head>
  <title>Funny Quote Gen</title>
  <script>
    var quotes = [
      'Do not take life too seriously. You will never get out of \it alive. - Elbert Hubbard',
      'May the forces of evil become confused on the way to your house. - George Carlin',
      'Laziness \is nothing more than the habit of resting before you get tired. - Jules Renard',
      'There can not be a crisis next week. My schedule \is already full. - Henry Kissinger',
      'My life needs editing. - Mort Sahl',
      'I always wanted to be somebody, but now \I realize \I should have been more specific. - Lily Tomin',
      'If at first you don\'t succeed, find out \if the loser gets anything. - William Lyon Phelps',
      'You\'re only as good as your last haircut. - Fran Lebowitz'
    ];


    function newQuote() {
      var randomNumber = Math.floor(Math.random() * quotes.length);
      document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
    }
  </script>
</head>

<body>
  <h1>Simple Funny Quote Generator</h1>

  <div id="quoteDisplay">
    <!-- Quotes will display here! -->
  </div>

  <button onclick="newQuote()">New Quote</button>
</body>

</html>

Answer 2

这里有几个问题-首先，您需要按以下方式更改HTML：

<!-- Separate the loading of the javascript.js script -->
<script src="javascript.js"></script> 

<!-- Ensure this script block is declared second -->
<script>

    function newQuote() {
        // .length is a property, not a function, of an array - replace 
        // length() with .length. Access the quotes via window.quotes
        var randomNumber = Math.floor(Math.random() * (window.quotes.length));

        // Again, access the quotes via window.quotes
        document.getElementById('quoteDisplay').innerHTML = window.quotes[randomNumber];
    }
</script>

在您的javascript.js文件中，将引号附加到当前窗口，如下所示：

window.quotes = [
    'Do not take life too seriously. You will never get out of \it alive. - Elbert Hubbard',
    'May the forces of evil become confused on the way to your house. - George Carlin',
    'Laziness \is nothing more than the habit of resting before you get tired. - Jules Renard', 
    'There can not be a crisis next week. My schedule \is already full. - Henry Kissinger',
    'My life needs editing. - Mort Sahl',
    'I always wanted to be somebody, but now \I realize \I should have been more specific. - Lily Tomin',
    'If at first you don\'t succeed, find out \if the loser gets anything. - William Lyon Phelps',
    'You\'re only as good as your last haircut. - Fran Lebowitz'
]

以这种方式使用window可以从另一个脚本/文件（即HTML文件中的脚本块）访问您在javascript.js文件中声明的quotes变量）。

window对象是单个“全局”对象，可从浏览器中运行的任何javascript文件访问该对象。当我们需要在文件/脚本块之间共享对这些东西的访问时（例如在您的项目中），我们可以将变量/数据/对象“附加”到window对象上。

您应该找到这些修补程序才能使您的项目运行-如果您希望看到其运行，here's a jsFiddle

Answer 3

脚本标签使用不正确。您不能同时导入外部js文件并将代码放入script标签中。一次只能发生一件事。

<!DOCTYPE HTML>
<html>
<head>
<title>Funny Quote Gen  </title>
</head>

<body>
<h1>Simple Funny Quote  Generator</h1>

<div id="quoteDisplay">
    <!-- Quotes will display here! -->
</div>

<button  onclick="newQuote()">New Quote</ button>
</body>



<script>
    function newQuote() {
var quotes = [
'Do not take life too seriously. You   will never get out    of \it alive. - Elbert Hubbard',
   'May the forces of evil become   confused on the way to your house. - George Carlin',
   'Laziness \is nothing more than the habit of resting before you get tired. - Jules Renard', 
   'There can not be a crisis next week. My schedule \is already full. - Henry Kissinger',
    'My life needs editing. - Mort Sahl',
    'I always wanted to be somebody, but now \I realize \I should have been more specific. - Lily Tomin',
    'If at first you don\'t succeed, find out \if the loser gets anything. - William Lyon Phelps',
    'You\'re only as good as your last haircut. - Fran Lebowitz'
 ];
        var randomNumber =    Math.floor(Math.random() * (quotes.length()));
        document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
    }
</script>

</html>

JavaScript按钮未按需显示引号

3 个答案: