Javascript по событию click, не читающему инструкцию 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

Каждый раз, когда вы нажимаете, вы фактически перепродаете строку. Проверьте масштаб!

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){ 
 
\t 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 2

Это, по сути, проблема. Ваш счетчик внутри функции, поэтому каждый раз, когда функция вызывается, она получает значение 0. Если вам нужен счетчик, который находится за пределами области видимости, и фактически хранит правильный счет, вам нужно будет отвлечь его от функции.

Если вы хотите, чтобы это было просто, даже просто перемещение clickCount над функцией должно работать.

Answer 3

Я не знаю, если это вопрос объема

Да, это вопрос масштаба, более чем один на самом деле.

Как?

1. Как отметил @thesublimeobject, счетчик внутри функции и, следовательно, получает инициализируется каждый раз, когда происходит событие щелчка.
2. Даже если вы поставите счетчик вне функции, вы все равно столкнетесь с проблемой с другой областью. В части функции else вы манипулируете переменной (newString), которую вы инициализировали внутри фрагмента if. Так как в этот раз снимок if не запускался, он выдаст ошибку 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 Closures, пожалуйста, обратитесь в этом: http://www.w3schools.com/js/js_function_closures.asp