Safe way to pass this variable to javascript method for all browsers

Question

I have this ASPX:

<script type="text/javascript">

    function clickCheckBox(event) {
        if (event.className == "icon-check-empty icon-large"){
            event.className = "icon-ok icon-large";
        }else if(event.className == "icon-ok icon-large"){
            event.className = "icon-check-empty icon-large";
        } else {
            alert("Problem:  " + event.className);//TODO:  log error
        }
    }

</script>

...

<div class="check-box-column camera-column-padding">
    <span id="spCheckBox" runat="server">
        <i id="cameraSelectCheckBox" class="<%# (bool)Eval("Checked") ? "icon-ok icon-large" : "icon-check-empty icon-large" %>"   style="cursor:pointer;" onclick="clickCheckBox(this)"></i>
    </span>
</div>

My concern is primarily for the javascript portion. I pass in this to the function call (which is event). Then I just do event.className to change the class type. I was looking at this older answer. I was wondering if it is ok to do this will all browsers as is or should I do it differently for different browsers like in the linked solution?

score 0 · Answer 1 · answered Jul 24 '14 at 20:23

Yes, this is fine. The other answer advocates Unobtrusive JavaScript, which certainly has its good points, but isn't a requirement to get working code.

One suggestion would be to call the argument element instead of event, since calling it event is likely to lead to confusion, since it implies that the argument would be the event object, not the target element.

Safe way to pass this variable to javascript method for all browsers

1 Answers1