'jquery, javascript not working in bootstrap

I'm using JQuery and bootstrap, and when I try to click the button that should invoke the function, it doesn't work. I've looked in the developer console and there is nothing there, anyone know?

<html>
    <head>
        <title>Bill</title>

        <link rel="stylesheet" href="css/bootstrap.min.css"/>
        <link rel="stylesheet" href="css/jumbotron-narrow-me.css"/>
        <script src="js/jquery-2.1.3.min.js"/>
        <script src="js/bootstrap.min.js"/>

        <script type="text/javascript">
        var count=0;

        $('#ocs').click(function(){
            count++;
            $('#cookies').html('0Cs : ' + count);
        });
        </script>
    </head>

    <body>
        <div class="jumbotron">
            <p class="lead"> 
                welcome to opposition clicker, its amazing. it has one upgrade.
                "opposition" when you get this, you will get +100 0Cs' every second.
            </p>
            <br><br/>
        </div>
        <div class="container" id="cookies">aasasa</div> 
        <button id="ocs" type="button" class="btn btn-lg btn-success">0Cs'</button>
    </body>
</html>
javascriptjqueryhtmltwitter-bootstrap


Solution 1:[1]

You just need to close some script tags properly and place your script in the bottom:-)

<html>

  <head>
    <title>Bill</title>
    <script data-require="jquery@*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="bootstrap@*" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  </head>

  <body>
    <div class="jumbotron">
      <p class="lead"> 
                welcome to opposition clicker, its amazing. it has one upgrade.
                "opposition" when you get this, you will get +100 0Cs' every second.
            </p>
      <br />
      <br />
    </div>
    <div class="container" id="cookies">aasasa</div>
    <button id="ocs" type="button" class="btn btn-lg btn-success">0Cs'</button>
    <script type="text/javascript">
        var count=0;

        $('#ocs').click(function(){
            count++;
            $('#cookies').html('0Cs : ' + count);
        });
        </script>
  </body>

</html>

Plunker

PS:- I didn't added the jumbotron-narrow-me.css in example because it is not available on plunker but hope it helps :-)

Solution 2:[2]

Ensure that your click handler is declared after the DOM is ready

Like that : 

$(document).ready(function(){
    $('#ocs').click(function(){
        // something
    });
});

Solution 3:[3]

use the .text() function instead of the .html()

Solution 4:[4]

try this: 

$(function(){
 $(document).on('click','#ocs',function(e){ // do somethign here
 });
});

Solution 5:[5]

Today I have found the solution to this question. If anyone is struggling with same problem in 2022 then you just have to make use of script tags and Jquery tags as given below:

<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet"
    href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-3.6.0.js" ></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 squiroid
Solution 2 Michael P. Bazos
Solution 3 arisalexis
Solution 4 Janx from Venezuela
Solution 5

Related Questions