How could **this.\_arr** array be updated inside a socket.io callback? 

```
class SocketClass{

 constructor(server) {
    this._arr = [];
    this._io = require('socket.io').listen(server);
    this._initListeners();
 }

 _initListeners() {
    this._io.on('connection', (socket, arr) => { 
        socket.on('event1', (data) => {
            this._arr.push(data);
        });

    });
 }

}

```

The problem is that **this.\_arr** is ***undefined*** inside a callback. I suppose it's because **this** is referencing to callback function itself...
['https://Stackoverflow.com/questions/49192427', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1811410/']
I'd use a data attribute for this. Store a template for the image src and a path value for each button, then update the image src values accordingly for each button click...

```js
var buttons = document.querySelectorAll("button");
var images = document.querySelectorAll("img");

[].forEach.call(buttons, function(button) {

  button.addEventListener("click", function() {

    var path = this.getAttribute("data-path");

    [].forEach.call(images, function(img) {

      var src = img.getAttribute("data-src-template").replace("{path}", path);
      img.src = src;
      console.log(img.src);

    });
  });
});

// intialize the image...
document.querySelector("#one").click();
```

```html
<button id="one" type="button" data-path="dist/one">This should change the path to "dist/one/"</button><br/>
<button id="two" type="button" data-path="dist/two">This should change the path to "dist/two/"</button><br/>
<button id="three" type="button" data-path="dist/three">This should change the path to "dist/three/"</button><br/>

<img data-src-template="{path}/rocket.png" alt="" />
<img data-src-template="{path}/rocket.png" alt="" />
<img data-src-template="{path}/rocket.png" alt="" />
```

This gives you what you need as well as being flexible if the path format ever changes, since everything you need is defined in the html and the script never needs to change.

For example, if you decided to move the images into another subfolder you could just change the image tag and it would still work...

```
<img data-src-template="newSubFolder/{path}/rocket.png" alt="" />

```
I believe you can do that by creating script. 
If you assign ID to each of the `<img>` tags you can then do something like:

```
document.getElementById('exampleID').innerHTML="<src="new_path">";

```

Eventually put each `<img>` tag in DIV

```
<div id=someid>
<img src="dist/one/rocket.png" alt="" />
</div>

```

Script:

```
document.getElementById('someid').innerHTML="<img src="new_path"/>";

```

I did not test it but the answer should be really close to this.

I hope this was helpfull.