Невозможно установить свойство 'className' of null

Question

Может ли кто-нибудь сказать мне, почему я получаю ошибку, указанную в названии? Я понимаю, что это означает, что «обертка» имеет значение NULL, но я не могу понять, почему она равна нулю.

Это HTML:

@using OP.App_Code 
@using OP.Controllers 

@{ 
    ViewBag.Title = "Patients"; 
} 

<div class="title"> 
    <div> 
     <h1 style="float: left">@ViewBag.Title</h1> 
    </div> 
    <div class="rmm" style="float: right; display: inline-block"> 
     <ul> 
      <li><a href="javascript:void(0)" id="NewPatient">New Patient</a></li> 
      <li><a href="javascript:void(0)" class="DeleteLink">Delete Patient(s)</a></li> 
     </ul> 
    </div> 
</div> 
<div class="content"> 
    <div id="patient_table"> 
     <table id="patients"> 
      <tr> 
       <th class="checkBox"></th> 
       <th id="p_name">Patient Name</th> 
       <th id="p_site">Site</th> 
       <th id="dob">Date of Birth</th> 
       <th id="ssn">SSN</th> 
      </tr> 
     </table> 
    </div> 
    <div class="modal_content"> 
     <div id="modal_window"> 
      <div style="text-align: right;"><a id="modal_close" href="#">close <b>X</b></a></div> 

      <p>Complete the form below to add a new patient:</p> 

      <form id="add_patient" method="POST" action="#" accept-charset="UTF-8"> 
      <p><label>First Name<strong>*</strong><br> 
      <input type="text" autofocus required size="48" name="fname" value=""></label></p> 
      <p><label>Last Name<strong>*</strong><br> 
      <input type="text" autofocus required size="48" name="lname" value=""></label></p> 
      <p><label>Birthdate (mm/dd/yyyy)<strong>*</strong><br> 
      <input type="text" autofocus required size="48" name="bday" value=""></label></p> 
      <p><label>Site Name<strong>*</strong><br> 
      <input type="text" autofocus required size="48" name="location" value=""></label></p> 
      <p><label>SSN<strong>*</strong><br> 
      <input type="text" autofocus required size="48" name="ssn" value=""></label></p> 
      <p><input type="submit" name="feedbackForm" value="Add Patient"></p> 
      </form> 
     </div> 
    </div> 
</div> 
<script src="@Url.Content("~/Scripts/PatientFormModal.js")" type="text/javascript"></script> 

Это Javascript, где "используется обертка"

var modal_init = function() { 
    var wrapper = document.getElementById("modal_content"); 
    var window = document.getElementById("modal_window"); 

    var openModal = function (e) { 
     wrapper.className = "overlay"; 
     window.style.marginTop = (-modal_window.offsetHeight)/2 + "px"; 
     window.style.marginLeft = (-modal_window.offsetWidth)/2 + "px"; 
     e.preventDefault ? e.preventDefault() : e.returnValue = false; 
    }; 

    var closeModal = function (e) { 
     wrapper.className = ""; 
     e.preventDefault ? e.preventDefault() : e.returnValue = false; 
    }; 

    var clickHandler = function (e) { 
     if (!e.target) e.target = e.srcElement; 
     if (e.target.tagName == "DIV") { 
      if (e.target.id != "modal_window") closeModal(e); 
     } 
    }; 

    var keyHandler = function (e) { 
     if (e.keyCode == 27) closeModal(e); 
    }; 

    if (document.addEventListener) { 
     document.getElementById("NewPatient").addEventListener("click", openModal, false); 
     document.getElementById("modal_close").addEventListener("click", closeModal, false); 
     document.addEventListener("click", clickHandler, false); 
     document.addEventListener("keydown", keyHandler, false); 
    } else { 
     document.getElementById("NewPatient").attachEvent("onclick", openModal); 
     document.getElementById("modal_close").attachEvent("onclick", closeModal); 
     document.attachEvent("onclick", clickHandler); 
     document.attachEvent("onkeydown", keyHandler); 
    } 
}; 

Answer 1

Вы используете document.getElementById("modal_content"), но modal_content класс.

Answer 2

Вы выбираете modal_content через id, но DIV объявлен с class:

document.getElementById("modal_content") 

HTML:

<div class="modal_content"> 

Вы должны использовать

<div id="modal_content">