2014-01-11 118 views
0

我搜索了很多,但無法找到答案...變化文字每次按下按鈕

我有我按一下按鈕,每次我希望它去到一個新的報價清單,引用。 有人可以請解釋這裏有什麼問題,以及我應該如何解決它?

<script language="Javascript">  

    function buttonClickHandler() { 

     var textField = document.getElementById("textField"); 

     var quotes = new Array(); 
     var nextQuote = 0; 
     quotes[0] = "Don't be so humble - you are not that great."; 
     quotes[1] = "Moral indignation is jealousy with a halo."; 
     quotes[2] = "Glory is fleeting, but obscurity is forever."; 
     quotes[3] = "The fundamental cause of trouble in the world is that the stupid are cocksure while the intelligent are full of doubt."; 
     quotes[4] = "Victory goes to the player who makes the next-to-last mistake."; 
     quotes[5] = "His ignorance is encyclopedic"; 
     quotes[6] = "If a man does his best, what else is there?"; 
     quotes[7] = "Political correctness is tyranny with manners."; 
     quotes[8] = "You can avoid reality, but you cannot avoid the consequences of avoiding reality."; 
     quotes[9] = "When one person suffers from a delusion it is called insanity; when many people suffer from a delusion it is called religion."; 

     nextQuote++; 
     textField.value = quotes[nextQuote];  
    } 
</script> 

我在互聯網上發現了這段代碼,當我使用這段代碼時,它改變了每次點擊的文本。

 var currentValue = parseInt(textField.value); 

     // Add one 
     currentValue++; 

     // Put it back with the new +1'd value 
     textField.value = currentValue; 
     var quotes = new Array(); 

我用於我的數組的代碼幾乎相同,但它不會更改每次點擊的文本。有什麼特別的,我需要做的數組?幫幫我!!

+0

您可以無限期地使用'pop'和'push'組合來旋轉引號而不是維護計數器。 – elclanrs

+1

你是怎麼調用'buttonClickHandler'的?如果你每次都調用它,它會一直顯示你的第一個報價,因爲你每次都初始化'nextQuote'。 – matthewpavkov

+0

我該怎麼做? – user3087780

回答

0

它不會改變它,因爲你聲明數組,你的處理程序中的索引,所以每次點擊你得到的報價在指數1.定義處理器外指數(以及數組)和增量的處理程序中:

var quotes = new Array(); 
    var nextQuote = 0; 
    quotes[0] = "Don't be so humble - you are not that great."; 
    quotes[1] = "Moral indignation is jealousy with a halo."; 
    quotes[2] = "Glory is fleeting, but obscurity is forever."; 
    quotes[3] = "The fundamental cause of trouble in the world is that the stupid are cocksure while the intelligent are full of doubt."; 
    quotes[4] = "Victory goes to the player who makes the next-to-last mistake."; 
    quotes[5] = "His ignorance is encyclopedic"; 
    quotes[6] = "If a man does his best, what else is there?"; 
    quotes[7] = "Political correctness is tyranny with manners."; 
    quotes[8] = "You can avoid reality, but you cannot avoid the consequences of avoiding reality."; 
    quotes[9] = "When one person suffers from a delusion it is called insanity; when many people suffer from a delusion it is called religion."; 

function buttonClickHandler() { 
    var textField = document.getElementById("textField"); 
    textField.value = [++nextQuote]; 
} 
+0

感謝您的幫助! – user3087780

0

因爲每個函數被調用nextQuote時間被重新設定爲0

0

你assinging nextQuote 0調用句柄每一次。

var nextQuote = 0;

儘量不要做這樣的:

var quotes = new Array(); 
    quotes[0] = "Don't be so humble - you are not that great."; 
    quotes[1] = "Moral indignation is jealousy with a halo."; 
    quotes[2] = "Glory is fleeting, but obscurity is forever."; 
    quotes[3] = "The fundamental cause of trouble in the world is that the stupid are cocksure while the intelligent are full of doubt."; 
    quotes[4] = "Victory goes to the player who makes the next-to-last mistake."; 
    quotes[5] = "His ignorance is encyclopedic"; 
    quotes[6] = "If a man does his best, what else is there?"; 
    quotes[7] = "Political correctness is tyranny with manners."; 
    quotes[8] = "You can avoid reality, but you cannot avoid the consequences of avoiding reality."; 
    quotes[9] = "When one person suffers from a delusion it is called insanity; when many people suffer from a delusion it is called religion."; 

var nextQuote = 0; 
var textField = document.getElementById("textField"); 


function buttonClickHandler() { 
    if(nextQuote < 9) { 
     nextQuote++; 
    } else { 
     nextQuote = 0; 
    } 
    textField.value = quotes[nextQuote]; 
} 
+0

非常感謝! – user3087780

0

嘗試像

VAR nextQuote = Math.floor((的Math.random()* 9)+1)。

而不是您的:

var nextQuote = 0;

稍後將9更改爲您的數組大小,並在將所有值聲明到數組後將其添加。

0

不同的是,工作的代碼得到值從buttonClickHandler

變種CurrentValue的= parseInt函數(textField.value)以外遞增;

這裏,你每buttonClickHandler被調用時重新初始化它

VAR nextQuote = 0;

我認爲,如果你有

if (window.nextQuote == null) { 
    window.nextQuote = 0 
} else { 
    window.nextQuote++ 
} 
0

替換該宣言,作爲以前發佈的答案已經說過,這個問題造成的,因爲nextQuotebuttonClickHandler內部定義,從而摧毀每一個函數執行完畢時,將工作每次函數開始時重新創建並初始化爲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,它有很多預先構建的任務可以簡化縮小和其他常見構建任務。首先設置起來可能有點棘手,但是有很多很棒的文章可以使它更容易理解。