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">×</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?
2 Answers 2
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.
3 Comments
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";
}
}
}