JavaScript cant get element from object

Question

I can't use the html elment with the id

notification-panel-sidebar

in my JavaScript, but I can Access it directly using jquery.

This is the Code:

const notificationContainer = {

    elements: {
        notificationPanelSidebar: $('#notification-panel-sidebar'),
        notificationPanelSidebarContainer: $('#notification-panel-sidebar-container')
    },

    classes: {
        notificationContainerActive: 'notification-container-active'
    },

    render () {
        this.toggleNotificationContainer();
    },

    toggleNotificationContainer () {
        console.log(this.elements.notificationPanelSidebar);
        this.elements.notificationPanelSidebar.click((e) => { // this does not work
        // $('#notification-panel-sidebar').click((e) => { // this works
            let _this = $(e.currentTarget);
            if (_this.hasClass(this.classes.notificationContainerActive)) {
                console.log("+++++++");
                this.hideNotificationContainer();
            } else {
                console.log("-------");
                _this.addClass(this.classes.notificationContainerActive);
                this.elements.notificationPanelSidebarContainer.show();
            }
        });
    },

    hideNotificationContainer () {
        this.elements.notificationPanelSidebar.removeClass(this.classes.notificationContainerActive);
        this.elements.notificationPanelSidebarContainer.hide();
    }

}

$(document).ready(function () {
    notificationContainer.render();
});

I get no error message.

Problem is `this` reference not pointing to the DOM element itself, instead it points to the jQuery object. See [this](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) question for more info about [this](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) reference in javascript — Anddo, Jul 25 '18 at 11:02
@Anddo He's using an arrow function, so it refers to the `notificationContainer` object. — Barmar, Jul 25 '18 at 11:03

Barmar · Accepted Answer · 2018-07-25T11:06:02.020

The problem is that you're creating the notificationContainer object before the DOM is ready, so $('#notification-panel-sidebar') doesn't select anything. Put the variable initialization inside $(document).ready().

$(document).ready(function() {
  const notificationContainer = {

    elements: {
      notificationPanelSidebar: $('#notification-panel-sidebar'),
      notificationPanelSidebarContainer: $('#notification-panel-sidebar-container')
    },

    classes: {
      notificationContainerActive: 'notification-container-active'
    },

    render() {
      this.toggleNotificationContainer();
    },

    toggleNotificationContainer() {
      console.log(this.elements.notificationPanelSidebar);
      this.elements.notificationPanelSidebar.click((e) => { // this does not work
        // $('#notification-panel-sidebar').click((e) => { // this works
        let _this = $(e.currentTarget);
        if (_this.hasClass(this.classes.notificationContainerActive)) {
          console.log("+++++++");
          this.hideNotificationContainer();
        } else {
          console.log("-------");
          _this.addClass(this.classes.notificationContainerActive);
          this.elements.notificationPanelSidebarContainer.show();
        }
      });
    },

    hideNotificationContainer() {
      this.elements.notificationPanelSidebar.removeClass(this.classes.notificationContainerActive);
      this.elements.notificationPanelSidebarContainer.hide();
    }

  }
  notificationContainer.render();
});

I thought my last 3 lines do the magic, so you say I run this `$(document).ready()` before the const declaration — Jon not doe xx, Jul 25 '18 at 11:06
The last 3 lines call `render` after the document is ready, but the problem is with the initialization of the `elements` element. — Barmar, Jul 25 '18 at 11:06
ok thanks it worked, I am requiring some js files in my app.js how would you use `$(document).ready()` in all of them without repeating it in every single file `require('./bootstrap'); require('./notificationContainer'); require('./navbar'); require('./urlPathChecker');` — Jon not doe xx, Jul 25 '18 at 11:24

score 0 · Answer 2 · answered Jul 25 '18 at 11:04

What doesn't work?

const notificationContainer = {

    elements: {
        notificationPanelSidebar: $('#notification-panel-sidebar'),
        notificationPanelSidebarContainer: $('#notification-panel-sidebar-container')
    },

    classes: {
        notificationContainerActive: 'notification-container-active'
    },

    render () {
        this.toggleNotificationContainer();
    },

    toggleNotificationContainer () {
        console.log(this.elements.notificationPanelSidebar);
        this.elements.notificationPanelSidebar.click((e) => { // this does not work
        // $('#notification-panel-sidebar').click((e) => { // this works
            let _this = $(e.currentTarget);
            if (_this.hasClass(this.classes.notificationContainerActive)) {
                console.log("+++++++");
                this.hideNotificationContainer();
            } else {
                console.log("-------");
                _this.addClass(this.classes.notificationContainerActive);
                this.elements.notificationPanelSidebarContainer.show();
            }
        });
    },

    hideNotificationContainer () {
        this.elements.notificationPanelSidebar.removeClass(this.classes.notificationContainerActive);
        this.elements.notificationPanelSidebarContainer.hide();
    }

}

$(document).ready(function () {
    notificationContainer.render();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notification-panel-sidebar">
sidebar
</div>
<div id="notification-panel-sidebar-container">
sidebar-container
</div>

Stack Snippet puts the Javascript at the bottom of the HTML, so the DOM elements exist when the JS runs. — Barmar, Jul 25 '18 at 11:10

JavaScript cant get element from object

2 Answers2