Question

我试图重用year变量的输出。稍后，我将需要在多个函数中重用更新的值（基于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中，而不显示在浏览器输出中

1 个答案: