函數沒有按計劃調用

我對JavaScript非常陌生，總體上web開發並且真的無法理解爲什麼我的函數沒有被正確調用。函數沒有按計劃調用

我試圖創建一個「控制器」類，因爲我會調用它，其中包含彈出式元素的功能，如open()和close()。

這裏是控制器類：

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 = ""; 
}

然後我們有一個全球範圍內這是控制器對象，駐留在HTML的頭內。

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

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

和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>

當我調試這在Chrome中，感覺就像在open()頁面加載被調用，但我想我已經有線它被點擊按鈕調用。無論如何彈出窗口不會顯示，但這是另一個問題。

希望任何人都可以給我一個提示如何進行？

來源

2016-12-09 Alex

您正在初始化HEAD標籤中的控制器嗎？

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

因爲對我來說，Firefox抱怨「popupContainerId」元素不存在（還）。 JS在加載完整的HTML之前運行。但可以不相關。

來源

2016-12-09 10:29:28

。謝謝你的提示，我會馬上回來！ – Alex

現在我在頁面加載時調用的函數中添加了初始化，所以它不再返回undefined。 – Alex

之後它效果更好......雖然彈出窗口只顯示一毫秒或其他東西。但這是我現在要發佈的另一個問題！：）謝謝。 – Alex

小升級您的代碼

更好的前綴類此屬性。
無需申報「構造」，主要功能是已經設置爲構造
在構造函數中需要參考保存到「本」在onclick功能

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/

來源

2016-12-09 10:57:34 wolfeex

我想我必須將構造函數添加到原型，如果我想在一個頁面上更多的彈出控制器！但我很可能錯讀它:)感謝您的清理！ – Alex

@Alex：使用css將彈出窗口的默認'display'設置爲'none'。這樣，它就隱藏在頁面加載中。 – Cerbrus

函數沒有按計劃調用

回答

相關問題