点击事件上的 Javascript 不读取 else 语句或变量

Question

我正在尝试制作一个调用函数的点击处理程序；并且该函数获取一个字符串并基本上将最后一个字符切成薄片并将其添加到前面，并且每次再次单击时，它都应该将最后一个字母添加到前面。

起初看起来很简单，我以为我可以使用数组方法来完成。

 function scrollString() {

    var defaultString = "Learning to Code Javascript Rocks!";
    var clickCount = 0;

    if (clickCount === 0) {
        var stringArray = defaultString.split("");
        var lastChar = stringArray.pop();
        stringArray.unshift(lastChar);
        var newString = stringArray.join('');
        clickCount++;

    } else {
        var newArray = newString.split("");
        var newLastChar = newArray.pop();
        newArray.unshift(newLastChar);
        var newerString = newArray.join("");
        clickCount++;
    }

    document.getElementById('Result').innerHTML = (clickCount === 1) ? newString : newerString;

}

$('#button').on('click', scrollString);

现在它只在我第一次点击时起作用，开发者工具说 newArray 是未定义的； clickCount 也停止增加。我不知道这是范围问题，还是我应该采取完全不同的方法来解决这个问题？

Answer 1

事实上，这是一个范围界定问题。您的计数器在函数内部，因此每次调用该函数时，它都会设置为 0。如果您想要一个超出范围的计数器，并且实际上保持正确的计数，则需要将其从函数中抽象出来。

如果您想保持简单，即使只是将 clickCount 移到函数上方也应该可以。

Answer 2

每次单击时，实际上都是在重置字符串。检查范围！

var str = "Learning to Code Javascript Rocks!";
var button = document.getElementById("button");
var output = document.getElementById("output");


output.innerHTML = str;

button.addEventListener("click", function(e){
	str = str.charAt(str.length - 1) + str.substring(0, str.length - 1);
  output.innerHTML = str;
});

button{
    display: block;
    margin: 25px 0;
}

<button id="button">Click Me!</button>

<label id="output"></label>

Answer 3

不知道是不是范围问题

是的，这是一个范围问题，实际上不止一个。

怎么做？

1. 正如@thesublimeobject 所指出的，计数器在函数内部，因此每次点击事件发生时都会重新初始化。
2. 即使您将计数器放在函数之外，您仍然会面临另一个范围问题。在函数的else 部分，您正在操作一个在if sn-p 中初始化的变量（newString）。由于这次if sn-p 没有运行，它会抛出错误undefined。 （又是一个范围问题）

一个好的方法是：

1. 把计数器和defaultString放在函数外。如果 defaultString 动态获取值而不是您在代码中显示的值，请在页面加载或任何其他事件（如 change 等）时提取其值，而不是将其传递到函数中。
2. 不要为您的操作结果分配新字符串。而是将其分配给defaultString。这样，您可能不需要 if-else 循环和 newLastChar 来处理更新的结果。
3. 相应地操作对元素的分配。

Answer 4

您可以使用 Javascript 闭包功能。

var scrollString = (function() {
var defaultString = "Learning to Code Javascript Rocks!";
return function() {
    // convert the string into array, so that you can use the splice method
    defaultString = defaultString.split('');

    // get last element
    var lastElm = defaultString.splice(defaultString.length - 1, defaultString.length)[0];

    // insert last element at start
    defaultString.splice(0, 0, lastElm);

    // again join the string to make it string
    defaultString = defaultString.join('');
    document.getElementById('Result').innerHTML = defaultString;
    return defaultString;
}
})();

使用它，您无需在全局范围内声明任何变量或任何计数器元素。

要了解 Javascript 闭包，请参考： http://www.w3schools.com/js/js_function_closures.asp