javascript - Javascript 随机引用 onclick

Question

单击按钮时，我想显示数组中的随机引用。问题是我的代码在加载页面时没有显示第一个随机引用。换句话说，此代码有效，但要查看第一个报价，我必须按下按钮。加载浏览器时如何获得第一个随机报价？谢谢！

<script language="javascript">
function quotes(){

var aquote = new Array;
aquote[0]="\"Quote 1.\"";
aquote[1]="\"Quote 2.\"";
aquote[2]="\"Quote 3.\""

rdmQuote = Math.floor(Math.random()*aquote.length);
document.getElementById("txtbox") .value=aquote[rdmQuote];
}

</script>

和 HTML

<textarea id="txtbox" style="width:600px;" readonly></textarea>

<button onClick="quotes()">Click Here</button>

Answer 1

利用

window.onload = quotes;

在函数定义之后。

Answer 2

jsfiddle 演示

您可以调用该quotes函数以获得第一个随机报价。但是，一旦函数可以访问 dom 元素，就应该这样做。因此，您将需要等待 dom 呈现，然后再尝试访问该元素。您可以通过将onload事件附加到window然后调用函数来做到这一点quotes。

function quotes(){

 var aquote = new Array;
 aquote[0]="\"Quote 1.\"";
 aquote[1]="\"Quote 2.\"";
 aquote[2]="\"Quote 3.\""

 rdmQuote = Math.floor(Math.random()*aquote.length);
 document.getElementById("txtbox") .value=aquote[rdmQuote];
}
window.onload=quotes;

Answer 3

其他一些人建议将引号函数分配给事件处理程序，如 onload 或 onready。这并不总是有效，具体取决于哪些其他脚本也可能使用这些事件处理程序，以及它们是否优雅地重新定义事件处理程序或覆盖事件处理程序。

当我编写像你这样的代码，或者回答像你这样的问题时，我不确定它将在什么环境中运行，我使用 setTimeout 或在定义了必要的 textarea HTML 之后放置的另一个脚本。

如果您确保将整个脚本放在包含 textarea 的 HTML 之后，则可以使用 gdoron 的答案。

如果您不能使用事件处理程序，并且不能将脚本元素移动到使用它的 HTML 元素之后，那么您可以将此行添加到您的代码中。在实践中它应该一直有效，但理论上它可能会失败：

setTimeout(quotes, 500);

在结束脚本标记之前添加该行，如果其他方法都不适合您，那么您应该很高兴。

Answer 4

function quotes(){

    var aquote = new Array;
    aquote[0]="\"Quote 1.\"";
    aquote[1]="\"Quote 2.\"";
    aquote[2]="\"Quote 3.\""

    rdmQuote = Math.floor(Math.random()*aquote.length);
    document.getElementById("txtbox") .value=aquote[rdmQuote];
}

quotes(); // here call that function. just make sure the DOM is ready.

Answer 5

在脚本标签中定义后调用函数quotes()。如果脚本标签出现在您尝试获取的 DOM 元素之后，那么您应该没问题。但是将它放在 $(document).ready() 块中会更安全。

Answer 6

// Create an array and assign your quote urls

var quotation = new Array();

quotation[0] = "paster your quote url";
quotation[1] = "paster your quote url";
quotation[2] = "paster your quote url";
quotation[3] = "paster your quote url";

var random = Math.floor(Math.random()*(quotation.length));
function printquote(){
document.write(quotation[random]);
}

<button onclick="printquote">Get quote</button>