为什么在 hashchange 事件侦听器中重复输出？答案

【问题标题】：Why is output being duplicated inside hashchange event listener?为什么在 hashchange 事件侦听器中重复输出？
【发布时间】：2019-01-17 15:20:36
【问题描述】：

我用 #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; 
});

【问题讨论】：

标签： javascript hashchange

【解决方案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>

【讨论】：

这不是你想要的吗？如果您希望它更新哈希而不是追加，请改用p.innerHTML = location.hash，+= 将追加到已经存在的任何内容。实际上这会与您拥有的其他代码中断，我将用一个工作示例更新答案