Uncaught TypeError로 인해 모달을 닫을 수 없습니다 : null의 'onclick'속성을 설정할 수 없습니다.

Question

다음 코드를 실행할 때 드롭 다운 메뉴의 Current Children 옵션을 클릭하면 해당 모달이 화면에 표시되지만 나는`

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> 

자바 스크립트 :

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

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

에 modalName는 <span class="close" id="currentChildrenModalSpan">&times;</span>

Answer 2

귀하의 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"; 
    } 

}); 

Answer 3

이 부분은 잘못된 것입니다 :

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

spanModal = document.getElementById(span) 

당신은 문자열과는 HTMLElement을 연결하려고한다.