Modify css with js

I have a div that I want to switch from overflow=hidden to overflow=visible on mouse event.

In the <head> I have

<style type="text/css">
        #text_area
        {
            position: absolute;
            height: 213px;
            overflow: hidden;
        }
</style>

<script type="text/javascript">
    function expand_text(){
        e = document.getElementById(text_area);
        if(e.style.overflow=='hidden') {
            e.style.overflow='visible';
        } else {
            e.style.overflow='hidden';
        }
    }
</script>

in the I have this…

<div id="text_area">
        <a href="#" onclick="javascript:expand_text()">Expand text</a><br>
        BLOCK OF TEXT HERE
</div>

this code does nothing, not sure why, maybe I’m missing something, or maybe it’s completely wrong!