Why does it say that $ is not defined?

Question

So, because I like my code to be organized I searched on the internet how can I load jQuery in to a JS file so that I can load that JS file in the html file and work separately in the JS file. I found an elegant solution online and I applied it, it worked when I was checking if the jQuery is loaded but it did not work when I was trying to find a class from a div. It is giving me the "$ is not difined" error. Why? the check says that jQuery is loaded.

JS Code:

var script = document.createElement('script');
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
window.onload = function()
{
if (window.jQuery)
{
    alert('jQuery is loaded');
}
else
{
    alert('jQuery is not loaded');
}
}
$('.spectacle').click(function(){
alert('plm');
});

HTML code:

<!DOCTYPE html>
<html>
<head>
<title>Spectacole</title>
<link rel="stylesheet" type="text/css" href="Spectacole.css">
</head>
<body>
<div id="top-bar">
    <div id="bar-background"></div>
    <a href="../StartingPage/startingPage.html"><button 
id="mainMenu">
    </button></a>
</div>
<div id="wrapper">
    <div class="spectacle">

    </div>

    <div class="spectacle">

    </div>
    <div class="spectacle">
    </div>
    <div class="spectacle">
    </div>
    <div class="spectacle">
    </div>
    <div class="spectacle">
    </div>
    <div class="spectacle">
    </div>
</div>
    <script type="text/javascript" src="Spectacole.js"></script>
</body>
</html>

score 1 · Answer 1 · answered Jan 05 '19 at 18:46

add

$('.spectacle').click(function(){
alert('plm');
});

inside window.onload = function(){ }

 var script = document.createElement('script');
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
window.onload = function()
{
if (window.jQuery)
{
    alert('jQuery is loaded');
}
else
{
    alert('jQuery is not loaded');
}
  $('.spectacle').click(function(){
alert('plm');
});
}

.spectacle {
  height:50px;
  width:50px;
  background:#000;
  border:1px solid #fff;
}

<!DOCTYPE html>
<html>
<head>
<title>Spectacole</title>
<link rel="stylesheet" type="text/css" href="Spectacole.css">
</head>
<body>
<div id="top-bar">
    <div id="bar-background"></div>
    <a href="../StartingPage/startingPage.html"><button 
id="mainMenu">
    </button></a>
</div>
<div id="wrapper">
    <div class="spectacle">

    </div>

    <div class="spectacle">

    </div>
    <div class="spectacle">
    </div>
    <div class="spectacle">
    </div>
    <div class="spectacle">
    </div>
    <div class="spectacle">
    </div>
    <div class="spectacle">
    </div>
</div>
    <script type="text/javascript" src="Spectacole.js"></script>
</body>
</html>

score 1 · Answer 2 · answered Jan 05 '19 at 18:50

1

Why add jQuery by appending a script tag to the DOM, why not just put the tag in the DOM to begin with?

Seems to be the same problem discussed in this SO: Load jQuery with Javascript and use jQuery

answered Jan 05 '19 at 18:50

Sean Murphy

516
4
7

Why does it say that $ is not defined?

2 Answers2