CODEWITHSUNDEEP
javascripthtml
AtlasBowler
AtlasBowler

Reputation: 267

Cannot set property 'className' of null

Can anyone tell me why I am getting the error stated in the title? I understand that it means "wrapper" is null, but I can't figure out why it is null.

This is the 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>

This is the javascript where "wrapper is used"

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

Upvotes: 0

Views: 9914

Answers (2)

Martin Lantzsch
Martin Lantzsch

Reputation: 1901

You are selecting the modal_content via id, but the div is declared with a class:

document.getElementById("modal_content")

html:

<div class="modal_content">

You should use

<div id="modal_content">

Upvotes: 1

mellis481
mellis481

Reputation: 4148

You're using document.getElementById("modal_content"), but modal_content is the class.

Upvotes: 5

Related Questions