How to assign a HTML element to a JavaScript global variable?

Question

I was wondering why I can't use global variables with HTML elements.

I'm trying to do something like this:

<script>
//I want to declare my variables here
  var div1 = document.getElementById('a');
  var div2 = document.getElementById('b');
  var div3 = document.getElementById('c');

 //And I want to use them here, inside a function. 
  function myFunction(){
    div1.style.display = 'none';
    div2.style.display = 'none'; 
    div3.style.display = 'none';  
  }
</script>

Somehow, it doesn't let me use the variables I have declared outside of the function, but if I do like this, it does let me:

<script>
function myFunction(){
  var div1 = document.getElementById('a');
  var div2 = document.getElementById('b');
  var div3 = document.getElementById('c');
  div1.style.display = 'none';
  div2.style.display = 'none'; 
  div3.style.display = 'none';  
}
</script>

Thing is, I have a lot of similar functions and I dont want to declare the variables each time in the functions I make, Is there a way to assign global variables to HTML elements, so that way I can achieve what I want as in the first snippet?

Thanks!

What do you mean it won't let you use the variables? Are you getting an error? — Raul Marquez, Apr 24 '20 at 06:01
Most likely [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Andreas, Apr 24 '20 at 06:02
It doesn't let me use the global variables, for example when i try div1.style.display = 'none'; as in the first method, it doesnt hide the div, but when i use the same thing with the second method it does hide the div — xypher, Apr 24 '20 at 06:06
It doesn't show me any error message, simply the div is still visible when using div1.style.display = 'none'; it should be hidden. — xypher, Apr 24 '20 at 06:13
Try adding `console.log(div1, div1.style.display)` after `div1.style.display = 'none'` and tell us what you then see in your browser's developer console. — Phil, Apr 24 '20 at 06:16
Did you open the Console tab? Your code works [as it is](https://jsfiddle.net/1n97exgj/) when correctly timed, i.e. the elements are not assigned to the global variables before the elements exist. — Teemu, Apr 24 '20 at 06:38
did you ever get a solution please? I seem to be facing the same issue here — Samuella Manye Aglago, Apr 23 '23 at 22:38

score -2 · Answer 1 · edited Apr 24 '20 at 08:04

You might be doing something wrong in your code, this is correct approach only

Checkout this example

//I want to declare my variables here
var div1 = document.getElementById('a');
var div2 = document.getElementById('b');
var div3 = document.getElementById('c');

//And I want to use them here, inside a function. 
function hide() {
  div1.style.display = 'none';
  div2.style.display = 'none';
  div3.style.display = 'none';
}

function show() {
  div1.style.display = 'block';
  div2.style.display = 'block';
  div3.style.display = 'block';
}

p {
  text-align: center;
  font-size: 60px;
  margin-top: 0px;
}

<p id="demo"></p>
<input type="text" id="a">
<input type="text" id="b">
<input type="text" id="c">
<input type="button" value="hide" onclick="hide()">
<input type="button" value="show" onclick="show()">

Check the same in JSfiddle linkWorking Example

Then you say we can't use global variables? – Vishnu Shenoy Apr 24 '20 at 09:24 — Vishnu Shenoy, Apr 24 '20 at 09:24

How to assign a HTML element to a JavaScript global variable?

1 Answers1