Uncaught TypeErrorのためModalを閉じることができません：ヌルのプロパティ 'onclick'を設定できません

Question

次のコードを実行すると、ドロップダウンメニューのCurrent Childrenオプションをクリックすると、対応するModalが画面に表示されます私は `

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

}); 

Answer 1

変更

span = (modalName + "Span");

modalNameが<div id="currentChildrenModal" class="modal">を参照し、あなたがmodalName.idを使用してい<span class="close" id="currentChildrenModalSpan">&times;</span>

Answer 2

あなたmodalNameは、文字列のはずが、次の行はそれを要素になりさ：

modalName = document.getElementById(modalName); 

だなぜあなたspan変数は要素を取得するための正しい文字列ではありません。 onclickが見つからない場合、spanModal要素にonclickを添付することはできません。試みるべき1つの良いことは、あなたがそれらの意味を容易に見つけることができるように変数に名前を付けることです。次のことを試してみてください。

$(".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"; 
    } 

}); 

Answer 3

あなたのコードのこの部分が間違っている：

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

spanModal = document.getElementById(span) 

あなたは文字列でのHTMLElementを連結しようとしていると。