Why button click don't work in my Javascript-html? -
what trying have 2 buttons @ top default show french , when click on english button must replace english french (i using hide , show so).
but problem none of them works neither button click envokes. below 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 1 please let me know reason this? this:
(which on french button click must replace "english" text written "french") , have this:
i don't know why?
your script either needs deferred ...
<script defer="defer">
... or script needs below dom elements 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>
Comments
Post a Comment