javascript object: variable global can not read in different function

Question

I have this script

var b = {
  c: {
    a: document.querySelector(".a"),
    init: function() {
      this.a.style.backgroundColor = "red";
      this.a.addEventListener("click", b.c.change);
    },
    change: function() {
      this.a.style.width = "100px";
    }
  }
}
b.c.init();

.a {
  width: 10px;
  height: 10px;
  background: black;
  cursor: pointer;
}

<div class="a"></div>

Why this.a style "undefine"???

I don't understand your question, sorry – ale Oct 14 '16 at 11:33 — ale, Oct 14 '16 at 11:33

score 1 · Accepted Answer · answered Oct 14 '16 at 11:34

1

Inside the change event handler, this refers to the dom element. So just change this.a.style.... to this.style.... .

var b = {
  c: {
    a: document.querySelector(".a"),
    init: function(){
      this.a.style.backgroundColor="red";
      this.a.addEventListener("click", b.c.change);
    },
    change: function(){
      this.style.width="100px";
    }
  }
}
b.c.init();

.a {
  width: 10px;
  height: 10px;
  background: black;
  cursor: pointer;
}

<div class="a"></div>

answered Oct 14 '16 at 11:34

Pranav C Balan

113,687
23
165
188

but as selecting with class if having multiple elements will create problem.. so better go with "id". – BEJGAM SHIVA PRASAD Oct 14 '16 at 11:38
@BEJGAMSHIVAPRASAD what do you mean? – Keith Oct 14 '16 at 11:42
@BEJGAMSHIVAPRASAD In this special setup `a` will always contain only **one** element because `document.querySelector()` only returns the first matched element. – Andreas Oct 14 '16 at 11:55
1

thanks @Pranav C Balan – Ferry Alfanso Oct 14 '16 at 15:13
@FerryAlfanso :glad to help – Pranav C Balan Oct 14 '16 at 15:53

Rajesh · Answer 2 · 2016-10-14T11:53:44.517

1

First, in change event, this is pointing to DOM element and not object. So you can directly update style using this.

Second, inside a, this will point to c, so instead of b.c.change, you can directly do this.change

var b = {
  c: {
    a: document.querySelectorAll(".a"),
    init: function() {
      for (var i = 0; i < this.a.length; i++) {
        this.a[i].style.backgroundColor = "red";
        this.a[i].addEventListener("click", this.change);
      }
    },
    change: function() {
      console.log(this.innerHTML)
      this.style.width = "100px";
    }
  }
}
b.c.init();

.a {
  width: 10px;
  height: 10px;
  background: black;
  cursor: pointer;
  margin: 5px;
  padding: 5px;
}

<div class="a">1</div>
<div class="a">2</div>
<div class="a">3</div>
<div class="a">4</div>
<div class="a">5</div>

edited Oct 14 '16 at 11:53

answered Oct 14 '16 at 11:42

Rajesh

24,354
5
48
79

Hi @Rajesh, How about if we have more dom element in "change" function? – Ferry Alfanso Oct 14 '16 at 11:50
@FerryAlfanso you will have to loop over them and assign handler to every element. Please check the updated answer – Rajesh Oct 14 '16 at 11:54
Hi @Rajesh, i add new div.b and force to expand in change function. am i right? or any sugestion? thanks – Ferry Alfanso Oct 14 '16 at 15:12
@FerryAlfanso you can update the selector and it should work – Rajesh Oct 14 '16 at 16:05

BEJGAM SHIVA PRASAD · Answer 3 · 2016-10-14T12:07:57.413

-4

Try once this will work..

var b = {
  c: {
    a: document.getElementById("a"),
    init: function(){
      this.a.style.backgroundColor="red";
      this.a.addEventListener("click", b.c.change);
    },
    change: function(){
      this.style.width="100px";
    }
  }
}
b.c.init();

#a {
  width: 10px;
  height: 10px;
  background: black;
  cursor: pointer;
}

<div id="a"></div>

edited Oct 14 '16 at 12:07

answered Oct 14 '16 at 11:34

BEJGAM SHIVA PRASAD

2,181
1
18
27

:D thaaaaaaankkkkkkkkkssss........ – Ferry Alfanso Oct 14 '16 at 11:37
1

Here `self` is a pointing to `window` and only reason this is working is because you have used `id` as `a` – Rajesh Oct 14 '16 at 11:45
1

@Rajesh The only reason this is working, is because he has created a global variable call `a`. – Keith Oct 14 '16 at 11:49
@Keith The global property `a` is created by the browser -> [Do DOM tree elements with ids become global variables?](http://stackoverflow.com/questions/3434278/do-dom-tree-elements-with-ids-become-global-variables) – Andreas Oct 14 '16 at 11:54
ups sorry @BEJGAM SHIVA PRASAD, im too excited, self not working and i have problem with more dome in change function – Ferry Alfanso Oct 14 '16 at 12:01
@FerryAlfanso: I just modified check once.. – BEJGAM SHIVA PRASAD Oct 14 '16 at 12:09
@Andreas Indeed, my bad. I was thinking he's doing `self.a =`, but it's the `
` creating it.
– Keith Oct 14 '16 at 12:11

javascript object: variable global can not read in different function

3 Answers3