由於Uncaught TypeError無法關閉模式：無法設置null的屬性'onclick'

當我運行下面的代碼時，當我點擊下拉菜單中的當前子項選項時，相應的模式顯示在我的屏幕上，但隨後我我無法關閉它，因爲我在'由於Uncaught TypeError無法關閉模式：無法設置null的屬性'onclick'

spanModal.onclick = function()

錯誤出現以下錯誤是：

userTemplate.js:25 Uncaught TypeError: Cannot set property 'onclick' of null 
    at HTMLAnchorElement.<anonymous> (userTemplate.js:25) 
    at HTMLAnchorElement.dispatch (jquery-3.2.1.js:5206) 
    at HTMLAnchorElement.elemData.handle (jquery-3.2.1.js:5014)

爲什麼我得到這個錯誤？

HTML：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Children <span class="caret"></span></a> 
         <ul class="dropdown-menu"> 
         <li><a href="#" class="menu" id="currentChildren">Current Children</a></li> 
         <li> 
        </ul> 
       </li> 
      </ul> 
    </div> 

<div id="currentChildrenModal" class="modal"> 
    <div class="modal-content"> 
    <span class="close" id="currentChildrenModalSpan">&times;</span> 
     <p>List of all currently enrolled children. Include option to filter by group.</p> 
    </div> 
</div>

的Javascript：

$(".menu").on("click", function() 
{ 
    var modalFireButton; 
    var modalName; 
    var spanModal; 
    var span; 
    //get Id of button cliced 
    modalFireButton = $(this).attr('id'); 

    //set variable for corresponding modal 
    modalName = (modalFireButton + "Modal"); 

    modalName = document.getElementById(modalName); 
    span = (modalName + "Span"); 

    spanModal = document.getElementById(span) 

    // spanModal = document.getElementById(spanModal); 

    modalName.style.display='block'; 

    spanModal.onclick = function() 
     { 
      modalName.style.display = "none"; 
     } 

});

來源

2017-10-08 sleepylog

變化

span = (modalName + "Span");

到

span = (modalName.id + "Span");

modalName指<div id="currentChildrenModal" class="modal">，並獲得currentChildrenModal你需要使用modalName.id和追加Span得到處理跨越<span class="close" id="currentChildrenModalSpan">×</span>

來源

2017-10-08 01:52:31

你modalName應該是一個字符串，但以下代碼行的一個元素：

modalName = document.getElementById(modalName);

這就是爲什麼你span變量不是獲取元素的正確字符串。如果找不到，則無法附加onclick到spanModal元素。要嘗試的一件好事是爲變量命名，以便輕鬆找出它們的含義。請嘗試以下操作：

$(".menu").on("click", function() 
{ 
    var modalFireButton; 
    var modalName; 
    var modalElm; 
    var spanModal; 
    var spanName; 

    modalFireButton = $(this).attr('id'); 

    //set variable for corresponding modal 
    modalName = (modalFireButton + "Modal"); 
    spanName = (modalName + "Span"); 

    modalElm = document.getElementById(modalName); 

    spanModal = document.getElementById(spanName) 


    modalElm.style.display='block'; 

    spanModal.onclick = function() 
    { 
     modalElm.style.display = "none"; 
    } 

});

來源

2017-10-08 01:38:16

你的這部分代碼是錯誤的：

modalName = document.getElementById(modalName); 
span = (modalName + "Span"); 

spanModal = document.getElementById(span)

當你試圖連接具有一個串一個HTMLElement。

來源

2017-10-08 01:46:42

這正確。在你的情況，似乎你想跨度名稱是像「modal.id +」跨度「 –

由於Uncaught TypeError無法關閉模式：無法設置null的屬性'onclick'

回答

相關問題