Question of var declaration

Question

```javaScript
var h1 = document.querySelector('#h1');
var btn = document.querySelector(".btn");
var input1 = document.querySelector("input");
var input2 = document.querySelector("input").value;
btn.addEventListener("click",() => {
  h1.textContent = input1.value;
  h1.textContent = input2;
});
```
There are two input var call input1 and input2  and the input2 is not working, is that mean .value can not declaring together? same as .innerHTML / textContent ?

Steven Parker · Accepted Answer

The variable "input1" is just a reference to the element, so when you get "input1.value" inside the handler, you get whatever the user put into the box before clicking the button.
But "input2" is the value that was in the box when the page first loaded, so unless you pre-set the value in the HTML, it will be empty.
Also, by assigning the heading twice in a row, only the result of the second operation will be seen.

Gabbie Metheny · Answer

It's hard to tell without seeing all of your code, but I think the problem is that in input2, you're storing the initial value of the input, which would be an empty string (""). In the case of input1, since you only stored the reference to the input, it doesn't check the value of that input until the click event is triggered, so then there's actually some content there.
Hope that makes sense, if you need more help could you post your html and css as well, or just take a snapshot (https://teamtreehouse.com/library/previews-and-snapshots) of your workspace? Let me know!

Welcome to the Treehouse Community

Looking to learn something new?

Tani Huang

Tani Huang

Question of var declaration

2 Answers

Steven Parker

Steven Parker

Gabbie Metheny

Gabbie Metheny