You are including jQuery AFTER your script... Your script doesn't have access to $
yet. Change :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
Question
I made a jQuery code. it runs perfectly fine on JSFiddle, but won't work on my page. I checked other questions and solutions, but none helped me so I'm asking again.
Here's the code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Tic Tac Toe</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type="text/javascript" src="script.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<h1>Tic Tac Toe</h1>
<hr/>
<p>Click play to start playing!</p>
<div id="buttonPlay">Play!</div>
<div id="can">
<canvas id="s1" class="square"></canvas>
<canvas id="s2" class="square"></canvas>
<canvas id="s3" class="square"></canvas>
<br/>
<canvas id="s4" class="square"></canvas>
<canvas id="s5" class="square"></canvas>
<canvas id="s6" class="square"></canvas>
<br/>
<canvas id="s7" class="square"></canvas>
<canvas id="s8" class="square"></canvas>
<canvas id="s9" class="square"></canvas>
<h3>Wins: </h3>
<br/>
<h3>Loses: </h3>
</div>
</body>
</html>
CSS:
body {
}
h1 {
text-align: center;
}
p {
text-align: center;
font-size: 24px;
display: block;
}
#buttonPlay {
width: 90px;
height: 50px;
background-color: lime;
border: 1px solid black;
text-align: center;
font-size: 32px;
box-shadow: 5px 5px 10px #888;
display: block;
margin-left: 47%;
}
#buttonPlay:hover {
background-color: lightblue;
}
#buttonPlay:active {
background-color: lightblue;
width: 85px;
height: 45px;
box-shadow: 0px 0px 0px;
}
#can {
display: none;
margin-left: 44%;
margin-top: 100px;
}
.square {
width: 50px;
height: 50px;
border: 3px solid black;
font-size: 25px;
text-align: center;
}
JavaScript:
$(document).ready(function() {
$('#buttonPlay').click(function() {
$("p").css("background-color","yellow");
});
});
As you see it's wip, but I had to stop because the jQuery didn't function.
Please help me out here.
Problem solved! Thanks you for the answers ^^
Solution
You are including jQuery AFTER your script... Your script doesn't have access to $
yet. Change :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
OTHER TIPS
you have to include jQuery library before other script files that uses jQuery.Otherwise it will not able to access jQuery methods.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Putting http: before src=" might work
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
When working locally, use http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
, not //ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
, because locally the "protocol" is file://, not http://.