небольшой вопрос по замыканию

151

15 мая 2019, 07:50

document.querySelectorAll('button').forEach(function(elem) { 
  elem.addEventListener('click', function() { 
    var a = 0; 
    var b = 1; 
    var temp; 
    return function() { 
      this.nextElementSibling.innerHTML = a; 
      temp = a; 
      a = b; 
      b = temp + a; 
    } 
  }); 
});

<button>Фибоначчи</button><span></span> 
<button>Фибоначчи</button><span></span> 
<button>Фибоначчи</button><span></span>

Каждая кнопка по нажатию на нее должна в спане выводить следующее число Фибоначчи. Где ошибка не понимаю . подскажите пожалуйста.

Answer 1

Ошибка в том, что ваша функцию, которая была передана addEventListener, возвращает в никуда вашу локальную функцию. Что бы к обработчику события привязалась функция, которую вы возвращаеться через return, вы должны создать самовызывающуюсь (не знаю как правильно написать) функцию.

document.querySelectorAll('button').forEach(function(elem) { 
  elem.addEventListener('click', (function() { 
    var a = 0; 
    var b = 1; 
    var temp; 
    return function() { 
      this.nextElementSibling.innerHTML = a; 
      temp = a; 
      a = b; 
      b = temp + a; 
    } 
  }())); 
});

<button>Фибоначчи</button><span></span> 
<button>Фибоначчи</button><span></span> 
<button>Фибоначчи</button><span></span>

Answer 2

Ошибка заключается в том, что переданная функция не вызывается, следовательно замыкание не создается.

Для решения нужно просто вызвать эту функцию, чтобы в качестве обработчика назначилась результирующая функция:

document.querySelectorAll('button').forEach(function(elem) { 
  elem.addEventListener('click', 
   function() { 
    var a = 0; 
    var b = 1; 
    var temp; 
    return function() { 
      this.nextElementSibling.innerHTML = a; 
      temp = a; 
      a = b; 
      b = temp + a; 
    } 
  }() 
  ); 
});

<button>Фибоначчи</button><span></span> 
<button>Фибоначчи</button><span></span> 
<button>Фибоначчи</button><span></span>

Answer 3

Почему-то я понял это так, что последовательность чисел должна быть сквозной для всех кнопок.

var a = 0; 
var b = 1; 
var temp; 
document.querySelectorAll('button').forEach(function(elem) { 
  elem.addEventListener('click', function() { 
    this.nextElementSibling.innerHTML = a; 
    temp = a; 
    a = b; 
    b = temp + a; 
  }); 
});

.container span { 
  width: 40px; 
  display: inline-block; 
  text-align: center; 
}

<div class="container"> 
  <button>Фибоначчи</button><span>-</span> 
  <button>Фибоначчи</button><span>-</span> 
  <button>Фибоначчи</button><span>-</span> 
</div>