2014-01-11 184 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,它有很多预先构建的任务可以简化缩小和其他常见构建任务。首先设置起来可能有点棘手,但是有很多很棒的文章可以使它更容易理解。