每次按下按钮都会更改文本

Question

我搜索了很多但找不到答案......

我有一个引号列表，每次点击按钮我想要它去一个新的报价。 有人可以解释这里有什么问题以及我应该如何解决它？

<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();

我用于我的数组的代码几乎相同，但它不会更改每次单击的文本。我需要为数组做些什么特别的事吗？救命！！  

Answer 1

因为每次调用该函数时 nextQuote 都会重新设置为0

Answer 2

它不会改变它，因为你在处理程序中声明了数组和索引，因此每次单击时都会在索引处获得引用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];
}

Answer 3

每次调用处理程序时，你都会将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];
}

Answer 4

尝试类似

的内容

var nextQuote = Math.floor（（Math.random（）* 9）+1）;

而不是你的：

var nextQuote = 0;

稍后将9更改为您的数组大小，并在将所有值声明到数组后添加它。

Answer 5

不同之处在于，有效的代码可以从buttonClickHandler

外部获取值

var currentValue = parseInt（textField.value）;

每次调用buttonClickHandler时重新初始化

var nextQuote = 0;

我认为如果用

替换此声明，它将起作用

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

Answer 6

正如之前发布的答案已经说明的那样，导致问题的原因是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>

包装代码的self-invoking function是现代JavaScript中非常常见的模式，熟悉它是很好的。

使用strict mode可以帮助您避免一些易于创建的错误。

如果要将JavaScript代码部署到野外，则应该minifying它。拥有构建过程可以通过自动化为您轻松完成。我建议Grunt，它有许多预先构建的任务，可以简化和简化其他常见的构建任务。一开始设置可能有点棘手，但有很多很棒的文章可以让它更容易理解。