CODEWITHSUNDEEP
javascripthtmlcssbuttonhtml-table
testing Test
testing Test

Reputation: 53

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

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?

Upvotes: 0

Views: 1051

Answers (3)

张立伟
张立伟

Reputation: 57

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>

Upvotes: 1

srikanta mondal
srikanta mondal

Reputation: 119

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

        }
		});

Upvotes: 1

Harigovind R
Harigovind R

Reputation: 826

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>

Upvotes: 2

Related Questions