Variable assignment with and without .innerHTML

Question

I'm learning Javascript and curious about the following distinction I've just discovered. I'll use this page as an example. Take the upvote counter. It's class is .vote-count-post, and to edit this using parseInt I've done the following:

var voteA = document.querySelector('.vote-count-post')

voteA.innerHTML = parseInt(voteA.innerHTML) + 1

This successfully adds one to the vote counter, both as a return in the console, and within the DOM.

While observing this I noticed that vote.innerHTML occurred twice, so I wondered if that could instead be assigned a variable to avoid duplicate typing. Thus I wrote a new variable to test this:

var voteB = document.querySelector('.vote-count-post').innerHTML

voteB = parseInt(voteB) + 1

After entering this, the console returns an increase in the value of voteB, but it does not update the innerHTML in the visual on the DOM. I don't understand why, and wonder if this a fundamental/simple aspect of JS I don't yet comprehend. Could anyone help explain this?

That's because voteA.innerHTML is a direct reference to a property on an object. But when you store it in a variable, that internal reference is lost because that new variable is just the value of that property. — Andrew Li
– Andrew Li, Commented Jul 15, 2018 at 19:16
Try console.log( typeof voteA) and console.log( typeof voteB) for clues as to why — charlietfl
– charlietfl, Commented Jul 15, 2018 at 19:22

SuperStormer · Accepted Answer · 2018-07-15 19:24:59Z

1

voteB is a copy of the value of the innerHTML at the time you assign a value to it. If the value changes, voteB won't update because it is just a copy of the value at the time of assignment. See here for more info.

edited Jul 15, 2018 at 19:24

answered Jul 15, 2018 at 19:19

SuperStormer

5,5185 gold badges29 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alnitak Over a year ago

No, it is explicitly not a "reference to the value", it is a copy of its value.

SuperStormer Over a year ago

@Alnitak I fixed it

Collectives™ on Stack Overflow

Variable assignment with and without .innerHTML

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related