Problem with my client using jquery

Question

I have a very unusual and strange problem... I am using the Jquery library, however, it is not being interpreted correctly, the problem is not in the code itself, ie, when I do the code even without syntax error or semantics the code is not fired, however, when I put the same code in Codepen works correctly.

No code is working

I already tried:

<!-- Baixar a biblioteca -->

<!-- HTML -->
<div class="col">
  <div id="pallete1" style="width: auto;height: 195px;background-color: 
   #316E1F"></div>
</div>

<script src="tmp.js"></script>
<script src="jquery-3.3.1.min.js"></script>

/*
 * tmp.js
 */

 $(document).ready(function(){
   $("#pallete1").click(function(){
     $(this).css("background-color", "blue");
   });
 });

<!-- Via CDN -->

<!-- HTML -->
<div class="col">
  <div id="pallete1" style="width: auto;height: 195px;background-color: 
   #316E1F"></div>
</div>

<script src="tmp.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
integrity="sha384- 
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
crossorigin="anonymous"></script>

/*
 * tmp.js
 */

 $(document).ready(function(){
   $("#pallete1").click(function(){
     $(this).css("background-color", "blue");
   });
 });

<!-- Arquivo unico -->

<!-- HTML -->
<div class="col">
  <div id="pallete1" style="width: auto;height: 195px;background-color: 
   #316E1F"></div>
</div>

<script type="text/javascript">

  $(document).ready(function(){
    $("#pallete1").click(function(){
      $(this).css("background-color", "blue");
    });
  });

</script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
integrity="sha384- 
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
crossorigin="anonymous"></script>

Noting that I tested in the browsers Edge, Firefox and Chrome and did not work, I also tested with a server and opening a file directly from the browser and on another computer here in the company where I work!

Some important details:

• The same code works on Codepen
• Features that require Bootstrap Javascript work, less Tooltips and Popovers elements
• Sometimes the code cocks, but it stops and comes back whenever it wants
• The same logic only works with Vanillajs

Code link to Codepen

What I need:

I need to codate in Jquery and use the features of Bootstrap and with you, however, only using Codepen but I want to save and test my codes on the pc

Thank you all

Answer 1

Happens exactly as @bfavaretto said.

If the função depends on the jQuery to execute she has to come after the indexation of it. So first you call jQuery and then the function that depends on it.

See below the example working with your code:

<div class="col">
<div id="pallete1" style="width: auto;height: 195px;background-color: 
    #316E1F"></div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
      integrity="sha384- 
      q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
      crossorigin="anonymous"></script>
      
<script type="text/javascript">
$(document).ready(function(){
    $("#pallete1").click(function(){
    $(this).css("background-color", "blue");
    });
});
</script>

OBS: The same goes for archives .css, if you have a CSS that depends on Bootstrap or if you want to overwrite some class of it for example, first come the indexing of Bootstrap and only after it should come your file .css or else the Bootstrap classes can overwrite yours. So the right thing would be to do this way for example:

<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="meu-css-que-depende-do-bootstrap.css" />