javascript - Trying to hide button based on user email

Question

I have this button:

<a id="customAddNew" href="/ibs/_layouts/listform.aspx?PageType=8&amp;ListId={CED7A37E-B1B4-46DD-B5C6-9232195D7E16}&amp;RootFolder=" target="_self">Submit Work Order​​​&lt;/a>

I'm trying to use this script to hide the button based on the user logged in:

script type="text/javascript">
    var email = $().SPServices.SPGetCurrentUser({
        fieldName: "EMail",
        debug: false
        });

    var trimmedEmail = email.split("@");    
    var newButton = document.getElementById("customAddNew");

    if (trimmedEmail[1] == "napacanada.com"){
        //Is NAPA User, which can't Add New Items
        alert("napa user");
        newButton.style.display = "none";
        //$('#customAddNew').attr("display","none");
        alert("check point")
    }else{
        //Is City User, can Add New Items
        alert("none napa user");
        newButton.style.display = "block";  
        //$('#customAddNew').attr("display","block");
    }
</script>

I've tried doing it using JavaScript and jQuery but neither worked. This is the error I get:

Cannot read property 'style' of null

The first alert runs fine depending on the user, just not the check point alert

Answer 1

看起来此脚本未设置为在任何特定时间运行，这意味着它可以在您的按钮出现在页面上之前执行。您正在使用 jQuery，因此您可以利用 document.ready 事件：

<script type="text/javascript">
    $(document).ready(function(){
    var email = $().SPServices.SPGetCurrentUser({
        fieldName: "EMail",
        debug: false
        });

    var trimmedEmail = email.split("@");    
    var newButton = document.getElementById("customAddNew");

    if (trimmedEmail[1] == "napacanada.com"){
        //Is NAPA User, which can't Add New Items
        alert("napa user");
        newButton.style.display = "none";
        //$('#customAddNew').attr("display","none");
        alert("check point")
    }else{
        //Is City User, can Add New Items
        alert("none napa user");
        newButton.style.display = "block";  
        //$('#customAddNew').attr("display","block");
    }
    });

</script>

欲了解更多信息：http ://learn.jquery.com/using-jquery-core/document-ready/