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

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

0 голосов
/ 17 января 2019

Я сгенерировал месяцы года с хешем # 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; 
});

1 Ответ

0 голосов
/ 17 января 2019

Ваш код работает правильно, как он написан. Я думаю, что у вас случайно есть выходной код вашего календаря внутри вашей функции 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>
...