替换该宣言,作为以前发布的答案已经说过,这个问题造成的,因为nextQuote
是buttonClickHandler
内部定义,从而摧毁每一个函数执行完毕时,将工作每次函数开始时重新创建并初始化为0
。
您似乎在使用一些非常古老的教程学习JavaScript,下面的代码将展示如何将其重构为更现代的风格。
<script language="Javascript">
很久以前,<script>
标记的language
attribute已被弃用。不要使用它。它被替换为type
属性,但是don't use the type
attribute either。只有一个简单的<script>
标签适用于所有浏览器,它们都默认使用JavaScript,因为它是唯一一种作为客户端脚本语言获得任何支持的语言。
<script>
(function (document) { // Use a self-invoking function to keep our variables
// out of the global scope
"use strict"; // Force the browser into strict mode
var nextQuote = 0, // instead of using separate var statements you can use
// a comma to include all of your variable declarations
// in one statement.
/* Since we will be using the textField DOM element a lot, lets cache a
copy in a variable outside of the handler instead of enduring the
overhead of getElementById every time the handler runs,
querying the DOM is slow.
*/
textField = document.getElementById("textField"),
/* Instead of using new Array(), use an array literal. Literals are
shorter and behave in a more predictable way than the Array
constructor. Another benefit to using a literal is that you can
create the array and initialize it's values in one step avoiding
the tedious quotes[0] = "..."; quotes[1] = "..."; pattern of the
original code. Also, if you want to reorder the items in the list
you don't have to renumber them too.
*/
quotes = [
"Don't be so humble - you are not that great.",
"Moral indignation is jealousy with a halo.",
"Glory is fleeting, but obscurity is forever.",
"The fundamental cause of trouble in the world is that the stupid are cocksure while the intelligent are full of doubt.",
"Victory goes to the player who makes the next-to-last mistake.",
"His ignorance is encyclopedic",
"If a man does his best, what else is there?",
"Political correctness is tyranny with manners.",
"You can avoid reality, but you cannot avoid the consequences of avoiding reality.",
// The last item in the list should not have a comma after it, some
// browsers will ignore it but others will throw an error.
"When one person suffers from a delusion it is called insanity; when many people suffer from a delusion it is called religion."
];
function buttonClickHandler() {
nextQuote++;
// roll back to 0 if we reach the end
if (nextQuote >= quotes.length) {
nextQuote = 0;
}
textField.value = quotes[nextQuote];
}
document.getElementById('button').addEventListener("click", buttonClickHandler, false);
}(document)); /* This is the end of the self-invoking function. The document
object is being passed in as an argument. It will be imported
into the self-invoking function as a local variable also named
document. There are a couple of reasons to do this. Having it
aliased as a local variable will make any references to it
quicker since the browser will not have to look any further
up the scope-chain. Also, if this code is minified, the local
variable will be renamed to a shorter (often 1 character long)
name, saving download time, where references to the built-in
global document object would not.
*/
</script>
换行代码是现代JavaScript的一个很常见的图案self-invoking function,这将是很好的熟悉它。
使用strict mode将帮助您避免一些容易造成的错误。
如果你正在部署JavaScript代码到野外,你应该是minifying它。通过构建过程,可以通过自动为您实现这一目标。我会推荐Grunt,它有很多预先构建的任务可以简化缩小和其他常见构建任务。首先设置起来可能有点棘手,但是有很多很棒的文章可以使它更容易理解。
您可以无限期地使用'pop'和'push'组合来旋转引号而不是维护计数器。 – elclanrs
你是怎么调用'buttonClickHandler'的?如果你每次都调用它,它会一直显示你的第一个报价,因为你每次都初始化'nextQuote'。 – matthewpavkov
我该怎么做? – user3087780