javascript 变量显示在 console.log 中，但不显示在浏览器输出中

Question

我正在尝试重用年份变量的输出。稍后我将需要在多个函数中重用更新后的值 [基于 hashchange]。它在浏览器控制台中显示正确的值，但在浏览器中不显示。

<html>
<body>
<p></p>
<a href="#2018-01">1</a>
<a href="#2018-02">2</a>
</body>
<script>
location.hash = '#2019';
showHash();
var p = document.querySelector('p');
p.innerHTML = window.year;

function showHash() {
  return year = location.hash;  
}
window.onhashchange = showHash;
</script>
</html>

Answer 1

通过将 location.hash 分配给 year，您并未修改 p.innerHTML。 year 和 p.innerHTML 没有引用彼此的值。当你初始化如下：

p.innerHTML = window.year;

year 的值被复制所以现在你有两个值在那一刻恰好相同，但它们没有链接，所以如果你会为一个分配一个新值，它也会更新另一个。不，它们不是参考文献。

因此在事件处理程序中，您还应该将新散列分配给 p.innerHTML，或者更好——因为散列是文本——将其分配给 p.textContent:

var p = document.querySelector('p');
var year;

function showHash() {
  // Assign both to textContent and year (they are independent)
  p.textContent = year = location.hash;
  // Maybe call some other functions which need to know about `year`
  manage();
}

function manage() {
  console.log(year);
  // ... etc
}

window.onhashchange = showHash;

location.hash = '#2019'; // This triggers showHash, no need to call it explicitly

<p></p>
<a href="#2018-01">1</a>
<a href="#2018-02">2</a>

javascript 变量显示在 console.log 中，但不显示在浏览器输出中

javascript variable shows in console.log but not in browser output

javascript

window-object

hashchange