0

What I am trying to do is I have two buttons at top which by default show French and when I click on English button it must replace English by French (I am using hide and show to do so).

But the problem is none of them works neither the button click envokes. Below is my code:

<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery.min.js"></script> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> <meta charset="utf-8" /> <title>JS Bin</title> <script> (function () { $(".frc-tab").show(); $(".eng-tab").hide(); alert('check') $('.eng').on('click', function (event) { alert('eng click'); $('.eng-tab').show(); $('.frc-tab').hide(); }); $('.frc').on('click', function (event) { alert('french click'); $('.eng-tab').hide(); $('.frc-tab').show(); }); })(); </script> </head> <body> <div> <button class="eng">english</button> <button class="frc">french</button> </div> <div class="eng-tab"> <table class="table table-bordered"> <tr> <td>english</td> </tr> </table> </div> <div class="frc-tab"> <table class="table table-bordered"> <tr> <td>french</td> </tr> </table> </div> </body> </html>

Could some one please let me know the reason for this? What is something like this:

http://prntscr.com/6zesoe

(which on French button click must replace the "English" text written with "French") and what I have is something like this:

http://prntscr.com/6zetdg

I don't know why?

Improve this question

3 Answers 3

Reset to default
2

reposition your script below the body tag or after the closing of the last div as shown. This will solve your issues

<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery.min.js"></script> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> <meta charset="utf-8" /> <title>JS Bin</title> </head> <body> <div> <button class="eng">english</button> <button class="frc">french</button> </div> <div class="eng-tab"> <table class="table table-bordered"> <tr> <td>english</td> </tr> </table> </div> <div class="frc-tab"> <table class="table table-bordered"> <tr> <td>french</td> </tr> </table> </div> <script> (function () { $(".frc-tab").show(); $(".eng-tab").hide(); alert('check') $('.eng').on('click', function (event) { alert('eng click'); $('.eng-tab').show(); $('.frc-tab').hide(); }); $('.frc').on('click', function (event) { alert('french click'); $('.eng-tab').hide(); $('.frc-tab').show(); }); })(); </script>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

For your reference this is due to the fact that you called the self invoking function before the document have completed loading. And hence the class names and selectors are unknown to the script. Hope it helped
1

Your script either needs to be deferred ...

<script defer="defer">

... or your script needs to be below the dom elements it is manipulating ... 

<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery.min.js"></script> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> <meta charset="utf-8" /> <title>JS Bin</title> </head> <body> <div> <button class="eng">english</button> <button class="frc">french</button> </div> <div class="eng-tab"> <table class="table table-bordered"> <tr> <td>english</td> </tr> </table> </div> <div class="frc-tab"> <table class="table table-bordered"> <tr> <td>french</td> </tr> </table> </div> <script> (function () { $(".frc-tab").show(); $(".eng-tab").hide(); alert('check') $('.eng').on('click', function (event) { alert('eng click'); $('.eng-tab').show(); $('.frc-tab').hide(); }); $('.frc').on('click', function (event) { alert('french click'); $('.eng-tab').hide(); $('.frc-tab').show(); }); })(); </script> </body> </html>

Improve this answer

1 Comment

This HTML is not incorrect, the <head> tag closes within the body.
1

just replace the below lines of your code: 

(function () { $(".frc-tab").show(); $(".eng-tab").hide(); alert('check') $('.eng').on('click', function (event) { alert('eng click'); $('.eng-tab').show(); $('.frc-tab').hide(); }); $('.frc').on('click', function (event) { alert('french click'); $('.eng-tab').hide(); $('.frc-tab').show(); }); })();

By the following line and it will work: 

 $(document).ready(function() { { $(".frc-tab").show(); $(".eng-tab").hide(); alert('check') $('.eng').on('click', function (event) { alert('eng click'); $('.eng-tab').show(); $('.frc-tab').hide(); }); $('.frc').on('click', function (event) { alert('french click'); $('.eng-tab').hide(); $('.frc-tab').show(); }); }	});

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.