Почему выходные данные дублируются внутри слушателя события hashchange?

Question

Я сгенерировал месяцы года с хешем #2019-01 #2019-02 и т. Д. Каждый раз, когда я нажимаю на ссылку, он добавляет новый список месяцев.

Предполагается отображать только одну копию ссылок месяца, но выводить обновленный хэш. Так что, если я нажму на февраль, он должен вывести # 2019-02.

https://jsfiddle.net/captlid/gkhe4naz/3/

var date = new Date();
location.hash = date.getFullYear();
var p = document.querySelector('p');
p.innerHTML = location.hash;

window.addEventListener('hashchange', function() {

   for (dz = 0; dz < 12; dz++) { 
      p.innerHTML += '<a href="'+location.hash+'-'+String("0"+(dz+1)).slice(-2)+'">'+ months[dz] +'</a>&nbsp;';
   }
   p.innerHTML += location.hash; 
});

Answer 1

Ваш код работает правильно, как он написан. Я думаю, что у вас случайно есть выходной код вашего календаря внутри вашей функции hashchange. Если вы переместите его на улицу, он должен работать так, как вы ожидаете. Кроме того, вы создаете свой календарь внутри вашего p элемент вместо calendar элемент. код ниже показывает работающую версию

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var calendar = document.querySelector('#calendar');
var date = new Date();
location.hash = date.getFullYear();
var p = document.querySelector('p');
p.innerHTML = location.hash;

for (dz = 0; dz < 12; dz++) {
    calendar.innerHTML += '<a href="' + location.hash + '-' + String("0" + (dz + 1)).slice(-2) + '">' + months[dz] + '</a>&nbsp;';
  }

window.addEventListener('hashchange', function() {


  p.innerHTML = location.hash;
});

<div id="calendar"></div>
<p></p>