Javascript, CSS: displaying a hidden div not working? -

i know question that's been asked hundred times can't figure out why it's not working on me site.

javascript:

<script>   function show(boxid){     document.getelementbyid(boxid).style.visibility="visible";   }    function hide(boxid){     document.getelementbyid(boxid).style.visibility="hidden";   } </script> 

html (php generated):

echo '<div id="selectedbookingactionlink">';   echo '<a href="#" onclick="show(cancelpopup)">cancel</a>'; echo '</div>';  echo '<div id="cancelpopup">';   echo '<div class="question">cancel?</div>';   echo '<div class="answer">yes</div>';   echo '<div class="answer">no</div>'; echo '</div>'; 

css:

#cancelpopup {   width: 260px;   height: 80px;   visibility: hidden; } 

as can see, i'm trying change visibility property of cancelpopup div when user clicks "cancel" link. i've done research , found why i'm doing should work. yet pop box not appear.

you need use quotes when passing id of div show function:

echo '<a href="#" onclick="show(\'cancelpopup\')">cancel</a>';