Question

I have a JavaScript where I need to hide (and eventually show) some text by clicking a button. However, when I click the button, it does not call the function specified in the onclick parameter, and so nothing happens. Here is my source code:

<script type="text/javascript">
        $(document).ready(function(){                   
            var tip = 1;
            $(".tip1").hide();
            $(".tip2").hide();          
            switch (tip) {
                case 1:
                    $(".tip1").show();
                    break;
                case 2:
                    $(".tip2").show();
                    break;
            }           
            function nextTip() {
                $(".tip1").hide();
                
                return;
            }
        });
    </script>
    <br/>
    <div id='bg_container' style='background-image: url("<?=$PICS?>trackingpage_middle.jpg")' >
    <img style='z-index:-1;' width='737px' src='<?=$PICS?>trackingpage_top.jpg'>
    <div id='main_container' >
        <form>
            <input type="button" onClick="nextTip()" value = "Next Tip" />
        </form>
        <div class="tip1">

…
and so on.

Answer 1

Have you tried moving the function nextTip() out of $(document).ready to the global scope?