Custom alert box using javascript/jquery

Question

I created a custom alert box. It was working previously and I haven't changed anything on my website so I am not sure why this would be throwing and error now.

<script>
$(document).ready(function() {
    var information_object = <?php echo json_encode($results); ?>;
    $(".content").click(function() {
        var info = information_object[$(this).data('id')];
        if (info) {
            var warning;
            if(info.status == 3){
                warning = "High Voltage Detected";
            }else if(info.status == 4){
                warning = "Caution is Recommended"
            }else{
                warning = "Ok";
            }
            Alert.render("temp: " + info.temp + "&#0153" + "<br>" + "Address: " + info.address + "<br>" + "Date: " + info.date + "<br>" + "Status: " + warning);
        } else {
            alert("Invalid ID: " + id);
        }
    });
});
</script>

 <script
    function CustomAlert(){
        this.render = function(dialog){
            var winW = window.innerWidth;
            var winH = window.innerHeight;
            var dialogoverlay = document.getElementById('dialogoverlay');
            var dialogbox = document.getElementById('dialogbox');
            dialogoverlay.style.display = "block";
            dialogoverlay.style.height = winH+"px";
            dialogbox.style.left = (winW/2) - (550 * .5)+"px";
            dialogbox.style.top = "100px";
            document.getElementById('dialogboxhead').innerHTML = "temp Warning Information";
            document.getElementById('dialogboxbody').innerHTML = dialog;
            document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()">OK</button>';
        }

        this.ok = function(){
            document.getElementById('dialogbox').style.display = "none";
            document.getElementById('dialogoverlay').style.display = "none";
        }
    }

    var Alert = new CustomAlert();
</script>

Small portion of CSS file containing dialogbox properties.

#dialogoverlay{
    display: none;
    opacity: .8;
    position: fixed;
    top: 0px;
    left: 0px;
    background: #FFF;
    width: 100%;
    z-index: 10;
}

#dialogbox{
    display: none;
    position: fixed;
    background: #000;
    border-radius:7px; 
    width:550px;
    z-index: 10;
}
#dialogbox > div{ 
    background:#FFF; 
    margin:8px; 
}
#dialogbox > div > #dialogboxhead{ 
    background: #666; 
    font-size:25px; 
    padding:10px; 
    color:#CCC; 
    text-align: Center
}
#dialogbox > div > #dialogboxbody{ 
    background:#333; 
    padding:20px; 
    color:#FFF; 
}
#dialogbox > div > #dialogboxfoot{ 
    background: #666; 
    padding:10px; 
    text-align:right; 
}

Reading the console of chrome it reports the error Uncaught "TypeError: Cannot read property 'style' of null" on the dialogoverlay.style.display = block. Why am I getting this error?

Answer 1

Double check if you have a element on your page with the id dialogoverlay

If so, check if the javascript is on the bottom of the page, just before the </body> closing tag

If none of those solutions works for you, can you please post a example of your html?

Answer 2

Solution was to make sure you don't have the relevant code deleted in your html file. Just in case anyone wants to use above code here is what you also need in your html.

<div id="dialogoverlay"></div>
<div id="dialogbox">
  <div>
    <div id="dialogboxhead"></div>
    <div id="dialogboxbody"></div>
    <div id="dialogboxfoot"></div>
  </div>
</div>