PaulVO PaulVO - 1 year ago 65
Javascript Question

Changing CSS with javascript using getElementById

I have an element as such:

<div id="admin">

Which has style of:

display: none;

Now, I'm trying to change that display on button press by defining and calling

var admin = document.getElementById('admin'); = "block";

This works just fine. When I change
in both HTML and JS to something like
(like below), it breaks and throws me an error
admin is not defined(…)

<div id="admin-panel">
var admin = document.getElementById('admin-panel'); = "block";

Could anyone help me figure out why it works in the first instance but not the second?


It seems to be working when place
var admin = document.getElementById('admin-panel');
inside the
functions. Is this because the variable is not within their scope in the code below?

var adminView = {
init : function() {
var admin = document.getElementById('admin-panel');
this.adminBtn = document.getElementById('admin-toggle');
this.adminCancel = document.getElementById('admin-cancel');
this.adminSave = document.getElementById('admin-save');

this.adminCatName = document.getElementById('admin-cat-name');
this.adminCatUrl = document.getElementById('admin-cat-url');
this.adminCatClicks = document.getElementById('admin-cat-clicks');

this.adminBtn.addEventListener('click', function(){


render: function() {
var currentCat = catController.getCurrentCat();
this.adminCatName.value =;
this.adminCatClicks.value = currentCat.clickCount;
this.adminCatUrl.value = currentCat.img;

show: function() { = "block";

hide: function() { = "none";


Answer Source

Remove var from admin variable to make it global access .