CODEWITHSUNDEEP
javascripthtml
Alex
Alex

Reputation: 547

Function not invoked as planned

I'm very new to JavaScript, and web development overall and really can't grasp why my functions aren't invoked correctly.

I'm trying to create a "controller"-class as I would have called it, which contain functions such as open() and close() for a popup element.

Here is the controller class:

function PopupController(containerElementId){
    _containerElement = document.getElementById(containerElementId);
    _contentElement = _containerElement.getElementsByClassName("modal-body")[0];

    window.onclick = function(event) {
        if (event.target !== _containerElement && _containerElement.style.display === "block") {
            _containerElement.style.display = "none";
        }
    }
}

PopupController.prototype = {
    constructor: PopupController
}

PopupController.prototype.open = function(contentHtml) {
    _contentElement.innerHTML = contentHtml;
    _containerElement.style.display = "block";
}

PopupController.prototype.close = function() {
    _containerElement.style.display = "none";
    _contentElement.innerHTML = "";
}

And then we have the controller object with global scope which is, resides within the head of the HTML.

this._popupController = new PopupController("popupContainerId");

function openPopup(){
    this._popupController.open("<p>testing</p>");
}

And the HTML.

<body>
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" onclick="openPopup()">Read more</button>

    <div class="popupContainer" tabindex="-1" role="dialog" id="popupContainerId">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="close">Close</button>
            </div>
            </div>
        </div>
    </div>
</body>

When I debug this in Chrome, it feels like the open() is invoked at page load, though I think I've wired it to be invoked on the button click. The popup does not get displayed anyhow, but that's another issue.

Hope anyone can give me a tip on how to proceed?

Upvotes: 1

Views: 60

Answers (2)

techws
techws

Reputation: 148

A little upgrade on your code

  • better to prefix class attributes with this.
  • no need to declare 'constructor', the main function is already set to be the constructor
  • in constructor need to save a reference to 'this' in the onclick function
function PopupController(containerElementId){
    this._containerElement = document.getElementById(containerElementId);
    this._contentElement = this._containerElement.getElementsByClassName("modal-body")[0];

    var that = this;

    window.onclick = function(event) {
        if (event.target !== that._containerElement && that._containerElement.style.display === "block") {
            that._containerElement.style.display = "none";
        }
    }
}

https://jsfiddle.net/m1zq7otb/

Upvotes: 0

user2290133
user2290133

Reputation:

You are initializing the controller in the HEAD tag? 

this._popupController = new PopupController("popupContainerId");

Because for me, Firefox is complaining that "popupContainerId" element does not exists (yet). JS is run before whole HTML is loaded. But can be unrelated.

Upvotes: 1

Related Questions