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

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

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

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>