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

Question

I am trying to reuse the output of the year variable. I will need to reuse the updated value [based on hashchange] in multiple functions later on. It displays the correct value in the browser console, but it doesn't display in the browser.

<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>

`year` is not a reference to something; it is a primitive value, so when you *copy* it to `p.innerHTML` it does not matter what happens to `year` afterwards -- that `innerHTML` will not update. You should just do `p.innerHTML = year` *inside* `showHash`. — trincot, Jan 19 '19 at 19:37
You're also calling a function before it has been initialised — SuperDJ, Jan 19 '19 at 19:38
@SuperDJ Declarations are hoisted in JS. It doesn’t matter. — Terry, Jan 19 '19 at 19:43
@trincot, what is a primitive value? I know it works inside the hash function, I just want to be able to reuse the return value in other functions later. I don't want to stick all the functions inside showHash() — Lid, Jan 19 '19 at 19:51
See my answer. See also [primitive value](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) — trincot, Jan 19 '19 at 19:54

trincot · Accepted Answer · 2019-01-19T20:33:59.267

1

By assigning location.hash to year you are not modifying p.innerHTML. year and p.innerHTML are not referencing each other's value. When you initialised as follows:

p.innerHTML = window.year;

The value of year was copied so now you have two values which happen to be the same at that moment, but they are not linked so that if you would assign a new value to the one, it would also update the other. No, they are not references.

So in the event handler you should also assign the new hash to p.innerHTML, or better -- as the hash is text -- assign it to 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>

edited Jan 19 '19 at 20:33

answered Jan 19 '19 at 19:52

trincot

317,000
35
244
286

I still don't understand how to access the year variable outside the function – Lid Jan 19 '19 at 20:24
Like if I do something like this:for (var i = 0; i < year.substring(4,5); i++) { console.log(i); } i get year is undefined in the console log – Lid Jan 19 '19 at 20:26
Well it has an undefined value *before* the first time the event triggers. You must call your further actions from within that handler. – trincot Jan 19 '19 at 20:28
so everything has to be inside the showHash function that needs to access the year variable? – Lid Jan 19 '19 at 20:29
Yes, but you can of course call another function from there, so you can spread code over different functions. I added some code to the answer to demonstrate that. – trincot Jan 19 '19 at 20:30

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

1 Answers1