jQuery document ready functions not working

Question

I'm working on a form with 5 divs and to keep the form as clean and tidy as possible, I kept 4 of them hidden with "display: none".

When the button (ex. Add Client) is clicked, I want the next div (up to 4 more) to be displayed with a js, and when the other button (ex. Remove Client) is clicked, I want the last displayed div to be hidden again.

JS:

<script>
    $(document).ready(function addClient() {/*mycode*/});

    $(document).ready(function removeClient() {/*mycode*/});
</script>

HTML:

<input id="kkBtnNewClient" type="button" value="New Client" class="kkButton" onclick="addClient()"/>

<input id="kkBtnRemoveClient" type="button" value="Remove Client" class="kkButton" onclick="removeClient()"/>

I tried to put a simple alert in the / mycode / part, but I don't even get to that part.

Answer 1

The value you pass to ready() is called when the ready event fires .

It does not create a global variable from which to call the function.

Use a function declaration to do that. Better yet, bind the event handler with JavaScript and don't use onclick attributes at all.

 $("#kkBtnNewClient").on("click", function addClient() { alert("add client"); }); $("#kkBtnRemoveClient").on("click", function removeClient() { alert("remove client"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="kkBtnNewClient" type="button" value="New Client" class="kkButton" /> <input id="kkBtnRemoveClient" type="button" value="Remove Client" class="kkButton" />

Answer 2

You may try like as below:

 $(".group_1").hide(); $(".group_2").hide(); $(document).on('click','#kkBtnNewClient', function(){ console.log("kkBtnNewClient clicked"); $(".group_1").show(); $(".group_2").hide(); }); $(document).on('click','#kkBtnRemoveClient', function(){ $(".group_2").show(); $(".group_1").hide(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="group_1"> div 1 </div> <div class="group_1"> div 2 </div> <div class="group_1"> div 3 </div> <div class="group_1"> div 4 </div> <div class="group_2"> div 5 </div> <input id="kkBtnNewClient" type="button" value="New Client" class="kkButton" /> <input id="kkBtnRemoveClient" type="button" value="Remove Client" class="kkButton" />