为什么在hashchange事件监听器中重复输出?

时间:2019-01-17 15:20:37

标签: javascript hashchange

我用#2019-01#2019-02等的哈希值生成了一年中的月份。每次单击链接时,它都会附加另一个月份列表。

只应显示月份链接的一个副本,但输出更新的哈希值。因此,如果我单击2月,它将输出#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 :(得分:0)

您的代码在编写时正常工作。我认为您不小心将日历输出代码放在了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>