如何处理getElementById返回Null

Question

On our web application there are many pages. Some of them contain element "Ribbon.ListForm.Display.Manage.Workflows-Medium" while some pages not.

I would like to use same script to check against all pages. The script will hide the element "Ribbon.ListForm.Display.Manage", "Ribbon.ListForm.Display.Manage.Workflows-Medium" and "Ribbon.ListForm.Display.Manage.CheckOut-Large" if any.

 function hideEdit() {
        var edit = document.getElementById("Ribbon.ListForm.Display.Manage");
        if (typeof edit !== "undefined" && edit.value == ''){edit.style.display = "none";};
        var wf = document.getElementById("Ribbon.ListForm.Display.Manage.Workflows-Medium");
        if (typeof wf !== "undefined" && wf.value == ''){wf.style.display = "none";};
        var checkout = document.getElementById("Ribbon.ListForm.Display.Manage.CheckOut-Large");
        if (typeof checkout !== "undefined" && checkout.value == ''){checkout.style.display = "none";};
}       

The problem is when a page does not contain "Ribbon.ListForm.Display.Manage.Workflows-Medium" (the 2nd element) but contains "Ribbon.ListForm.Display.Manage.CheckOut-Large" (the 3rd element), the script will stop at in the middle with error [object is null or undefined]. Hence, 1st element is hided but 3rd element is not.

Could you please advice how to amend my script? Thank you.

Answer 1

Because getElementById() returns null if the element is not found.

element is a reference to an Element object, or null if an element with the specified ID is not in the document.

You can just check for the truthy value instead of use the typeof test

if (edit && edit.value == ''){edit.style.display = "none";};

Demo: Fiddle

Answer 2

You can check like this for null element:

if (edit!=null && edit.value == '') 
if (wf!=null && wf.value == '')
if (checkout!=null && checkout.value == '')

Answer 3

Since the question is tagged with jQuery:

$('#Ribbon\.ListForm\.Display\.Manage,#Ribbon\.ListForm\.Display\.Manage\.Workflows-Medium,#Ribbon\.ListForm\.Display\.Manage\.CheckOut-Large')
    .filter(function() {
        return this.value == '';
    })
    .hide();

First, it will select the elements you're interested in; then, it will hide those that match a simple filter based on value.

Answer 4

Even if the element is not existing in the page, the return type will be object and return value will be null. so, you can check the null case also. please see the modified code.

function hideEdit() {
    var edit = document.getElementById("Ribbon.ListForm.Display.Manage");
    if ( edit != null && typeof edit !== "undefined" && edit.value == ''){edit.style.display = "none";};
    var wf = document.getElementById("Ribbon.ListForm.Display.Manage.Workflows-Medium");
    if (wf != null && typeof wf !== "undefined" && wf.value == ''){wf.style.display = "none";}
    var checkout = document.getElementById("Ribbon.ListForm.Display.Manage.CheckOut-Large");
    if (checkout != null && typeof checkout !== "undefined" && checkout.value == ''){checkout.style.display = "none";}

}

thanks, varun.