Переменная javascript отображается в console.log, но не выводится в браузере - PullRequest
Новая
       43

Переменная javascript отображается в console.log, но не выводится в браузере

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

Я пытаюсь повторно использовать выходные данные переменной года.Мне нужно будет повторно использовать обновленное значение [на основе 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>

1 Ответ

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

Назначая 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>
...