Twitter bootstrap - Why button click don't work in my Javascript-html?

testingTest
April 29, 2015
188 views
3 votes
3 Answers

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:

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

I don’t know why?

Answers

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>

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>

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();
            });

        }
		});

Please signup or login to give your own answer.

Click here to cancel reply.

Twitter bootstrap – Why button click don't work in my Javascript-html?

Answers