Accessing JavaScript variables inside a function

Question

I'm trying to use a variable to hold an HTML id so I don't have to keep writing getElementById over and over again. But I can't get this to work. Here's my code:

var box1 = document.getElementById('box1');

function slide4(){
    box1.style.width='10%';
}

It works if I put the variable inside the function, but that seems like bad practice as I want to access that variable in other functions and don't want to keep declaring the variable over and over again.

function slide4(){
    var box1 = document.getElementById('box1');
    box1.style.width='10%';
}

Any ideas?

You say you can't get this to work. What actually happens when you try it? — Paul Phillips
– Paul Phillips, Commented Dec 16, 2012 at 19:27
must be scoping issues. Try declaring the variable without the var keyword and see if it works — kennypu
– kennypu, Commented Dec 16, 2012 at 19:28

Matthias · Accepted Answer · 2012-12-16 19:32:01Z

1

I think you access the DOM before it has been loaded. Try this instead:

var box1;

window.onload = function() {
    box1 = document.getElementById('box1');
}

function slide4() {
    box1.style.width = '10%';
}

answered Dec 16, 2012 at 19:32

Matthias

7,5356 gold badges59 silver badges92 bronze badges

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

Comments

csg · Accepted Answer · 2012-12-16 19:32:48Z

You should make sure the box1 initialization is run after the page gets loaded. So one solution would be this:

var box1 = null;
window.onload = function(){
    box1 = document.getElementById('box1');
}

Another solution is to create a function, instead of that variable, and use it whenever you want:

function BoxID(){
    return document.getElementById('box1');
}

Of course, if you use jquery library, whenever you want you can use:

$("#box1")

Tolik Kukul · Accepted Answer · 2012-12-16 19:34:57Z

0

I would recomend you to pass variable as argument:

var box1 = document.getElementById('box1');

function slide4(box){
    box.style.width='10%';
}

Also you can define variable without var that will make it property of window object

box1 = document.getElementById('box1');
alert(window.box1);

answered Dec 16, 2012 at 19:34

Tolik Kukul

2,02617 silver badges26 bronze badges

Collectives™ on Stack Overflow

Accessing JavaScript variables inside a function

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related