Question

我一直在尝试制作随机报价机＆＃34;从5个引号的数组中随机选择一个引号，并将文本插入到网页上的段落中。该机器使用HTML和JavaScript（jQuery）。考虑到项目的简单性，我怀疑我的错误非常简单。

这是HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Random Quote Machine</title>
        <script src="jquery.min.js"></script>
        <script src="quotes.js"></script>

    </head>
    <body>
    <h1>Mason Cooley Quotes</h1>
        <div>
            <p id="quote"></p>

        </div>
        <button id="quoteGen">Generate A Random Quote</button>
    </body>

</html>

以下是JavaScript：

var quotes = ["Innocence is thought charming because it offers delightful possibilities for exploitation.",
"Every day begins with an act of courage and hope: getting out of bed.",
"Hatred observes with more care than love does.",
"To understand someone, find out how he spends his money.",
"The educated do not share a common body of information, but a common state of mind."
];

function getQuote() { 
    return Math.floor(Math.random() * quotes.length);
}



$('#quoteGen').click(function() {
    $('#quote').text(quotes[getQuote()]);
});

Answer 1

因为您的脚本包含在head元素中，所以在您尝试将事件处理程序绑定到DOM时，quoteGen按钮不存在于DOM中。您需要在body标记结束之前包含脚本，或者将代码包装在DOM就绪事件处理程序中，以确保DOM在您的代码运行时按预期存在。

所以，你可以选择这个：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Random Quote Machine</title>

</head>
<body>
<h1>Mason Cooley Quotes</h1>
    <div>
        <p id="quote"></p>

    </div>
    <button id="quoteGen">Generate A Random Quote</button>

    <script src="jquery.min.js"></script>
    <script src="quotes.js"></script>  
</body>

</html>

...或者，使用支持DOM的处理程序，例如：

$(function () {
    $('#quoteGen').click(function() {
        $('#quote').text(quotes[getQuote()]);
    });
});

Answer 2

工作得很好吗？ http://jsfiddle.net/tj3dvz1m/。

确保在

中运行您的代码

$( document ).ready(function() {
    Your code here.
});

Answer 3

在#quoteGen dom节点存在之前设置处理程序。

您需要在关闭/ BODY之前将quotes.js包含在文件的末尾。

或者在文档准备就绪后注册要安装的处理程序：

＆＃13;

$(document).ready(function(){ 
  $('#quoteGen').click(function() {
    $('#quote').text(quotes[getQuote()]);
});
});

＆＃13;

Answer 4

此代码工作正常。归功于所有者。

// Random Quotes

var Quotation=new Array()

Quotation[0] = "Time is of the essence! Comb your hair.";
Quotation[1] = "Sanity is a golden apple with no shoelaces.";
Quotation[2] = "Repent! The end is coming, $9.95 at Amazon.";
Quotation[3] = "Honesty blurts where deception sneezes.";
Quotation[4] = "Pastry satisfies where art is unavailable.";
Quotation[5] = "Delete not, lest you, too, be deleted.";
Quotation[6] = "O! Youth! What a pain in the backside.";
Quotation[7] = "Wishes are like goldfish with propellors.";
Quotation[8] = "Love the river's \"beauty\", but live on a hill.";
Quotation[9] = "Invention is the mother of too many useless toys.";

var Q = Quotation.length;
var whichQuotation=Math.round(Math.random()*(Q-1));
function showQuotation()
{document.write(Quotation[whichQuotation]);}
showQuotation();

Answer 5

使用文档。在脚本开始时准备好并在HTML文件的页脚中查看你的javascript，因为它试图在HTML之后的目标中定位不存在的元素。

另外：你的Javascript是随机生成的，但是没有那么多，我可以建议通过仅定位数组中的一个点来避免过多的重复，然后每次脚本运行时使用++转到下一个重复项..只是一个想法：P

什么不能让这个随机引用生成器工作？

5 个答案: