替換該宣言,作爲以前發佈的答案已經說過,這個問題造成的,因爲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