HTML Create a Cookie Clicker Site – Part 2 The Upgrades
Leeson
Views: 14178
Like: 157
We will be continuing on with the episode 2 of how to create a cookie clicker styled website. Where we will be introducing upgrades!
I forgot to render this one in 1080p60, 1080p alone should be fine though.
Part 1:
Part 3:
Playlist:
I forgot to render this one in 1080p60, 1080p alone should be fine though.
Part 1:
Part 3:
Playlist:
Within this series we will slowly create a cookie clicker styled website with features like unlockables for progression, achievement popups, and some CSS styling to spice the site design up.
Be sure to leave a like if you enjoyed the video, and ask any questions you have below in the comments.
Links:
Brackets – (A modern, open source text editor that understands web design.)
15.02.2022
11:55
Where can i find full code?
i keep on getting this error on timestamp 9:03"Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at update (index.html:5:62) at timer (index.html:13:5)"
Thank you! Really appreciate this tutorial! 🙂
i cant change the settings of innerHTML
GO 3 part FAAAASTEEER !!!^_^
thankyou so much!
if you keep spamming the load button it will give you free autoclickers
When i try and load my save it doesn't load in the auto clickers.
Code:
<script>
function update() {
document.getElementById('text').value = cookiecount;
document.title = cookiecount + " Cookies";
document.getElementById("amountAutoClick").innerHTML = "You Own " + autoClick + " Auto Clickers";
document.getElementById('costAutoClick').innerHTML = ((autoClick + 1) * 12) + " Cookies";
}
var cookiecount = 0;
var autoClick = 0;
function timer() {
cookiecount = cookiecount + autoClick;
update()
}
setInterval(timer, 1000);
</script>
<html>
<head><title>Cookie Clicker</title></head>
<body>
<a href=# onClick="add()"><img src="cookie.jpg"></a>
<br><br>
You got:
<input type="text" id="text" disabled style="text-align:center">
<script>
function add() {
cookiecount = cookiecount + 1
update()
}
</script>
Cookies
<br><br>
<button> <a href="#" onClick="save()">Save</a></button>
<button><a href="#" onClick="load()">Load</a></button>
<br><br>
<p>Buy 1 Auto Clicker</p>
<button><a href="#" onClick="buyAutoClick()"><img src="autoclick.jpg" width="30px" height="30px"></a></button>
<p id="costAutoClick">12 Cookies</p>
<p id="amountAutoClick">You Own 0 Auto Clickers</p>
<script>
function save() {
localStorage.setItem("cookiecount", cookiecount);
localStorage.setItem("autoClick", autoClick);
}
function load() {
cookiecount = localStorage.getItem("cookiecount");
cookiecount = parseInt(cookiecount);
autoClick = localStorage.getItem("autoClick");
autoClick = parseInt(autoClick);
update()
}
function buyAutoClick() {
if (cookiecount >= ((autoClick+1) * 12)) {
cookiecount = cookiecount – ((autoClick+1) * 12);
autoClick = autoClick + 1;
update()
}
}
</script>
</body>
</html>
You deserve way more than 95 subs!!!
I got the error : Uncaught TypeError: Cannot set property 'innerHTML' of null
So in mine, I can have negative cookies. How do I fix this?
i followed to the point that you were done with the auto clicker and i canT click my cookie anymore and the save and load buttons dont work
i get the 12 things and i click on autoclicker and it doesnt work help! heres the code
<script>
function update() {
document.getElementById('text').value = goldogecount;
document.title = goldogecount + " Goldoges";
document.getElementById('amountAutoClick').innerHTML = "You Own " + autoClick + " DogeBread Workers";
}
var goldogecount = 0;
</script>
<html>
<head><title>Gold Doge Clicker</title></head>
<body>
<a href=# onclick="add()"><img src="goldoge.jpg"></a>
<br><br>
You got:
<input type="text" id="text" disabled style = text-align:center>
<script>
function add() {
goldogecount = goldogecount + 1
document.getElementById('text').value = goldogecount;
document.title = goldogecount + " Goldoges";
}
</script>
Goldoges
<br><br>
<p>Buy 1 DogeBread Worker</p>
<button><a href="#" onClick="buyAutoClick()"><img src=dogebread.jpg></a></button>
<p id="costAutoClick"> Goldoges</p>
<p id="amountAutoClick">You Own 0 DogeBread Workers</p>
<script>
function timer() {
goldogecount = goldogecount + autoClick;
update()
}
setInterval{timer, 1000}
function buyAutoClick() {
if (goldogecount >= ((autoClick+1) * 12)) {
goldogecount = goldogecount – ((autoClick+1) * 12);
autoClick = autoClick+ 1;
update()
}
}
</script>
</body>
</html>
where I can get the pictures?
Every Thing Is Not Working For Me Can You Please Paste The Fixed Script In My Reply's Idk Whats Wrong With It
—————————————————————————————————————————————————————————————
<script>
function update() {
document.getElementById('text').value = cookiecount;
document.title = cookiecount + " Cookies";
document.getElementById('amountAutoClick'").innerHTML = "You Own " + autoClick " "Auto Clickers";
}
var cookiecount = 0;
var autoClick = 0;
function timer() {
cookiecount = cookiecount + autoClick;
update()
}
setInterval(timer, 1000)
</script>
<html>
<head><title>Cookie Game</title></head>
<body>
<a href=# onclick="add()"><img src="cookie.jpg"></a>
you got:
<input type="text" id="text" disabled style= text-align:center>
<script>
function add() {
cookiecount = cookiecount + 1
update()
}
</script>
Cookies
<br><br>
<button><a href="#" onClick="Save()">Save</a></button>
<button><a href="#" onClick="Load()">Load</a></button>
<br><br>
<p>Buy 1 Auto Clicker</p>
<button><a href="#" onClick="buyAutoClick"><img src="Cursor.jpg" width="70px" height="65px">
</a><button>
<p id="costAutoClick">Cookies</p>
<p id="amountAutoClick">You Own 0 Auto Clickers</p>
<script>
function save() {
localStorage.setItem("cookiecount", cookiecount);
}
function load() {
cookiecount = localStorage.getItem("cookiecount");
cookiecount = parseInt(cookiecount);
update()
}
function buyAutoClick() {
if (cookiecount >= ((autoClick+1) * 12)) {
cookiecount = cookiecount – ((autoClick+1) * 12));
autoClick = autoClick + 1;
update()
}
}
</script>
</body>
</html>
function update() {
document.getElementById('text').value = cookiecount;
document.title = cookiecount + " Cookies";
document.getElementById('amountAutoClick'").innerHTML = "You Own " + autoClick " "Auto Clickers";
}
var cookiecount = 0;
var autoClick = 0;
function timer() {
cookiecount = cookiecount + autoClick;
update()
}
setInterval(timer, 1000)
</script>
<html>
<head><title>Cookie Game</title></head>
<body>
<a href=# onclick="add()"><img src="cookie.jpg"></a>
you got:
<input type="text" id="text" disabled style= text-align:center>
<script>
function add() {
cookiecount = cookiecount + 1
update()
}
</script>
Cookies
<br><br>
<button><a href="#" onClick="Save()">Save</a></button>
<button><a href="#" onClick="Load()">Load</a></button>
<br><br>
<p>Buy 1 Auto Clicker</p>
<button><a href="#" onClick="buyAutoClick"><img src="Cursor.jpg" width="70px" height="65px">
</a><button>
<p id="costAutoClick">Cookies</p>
<p id="amountAutoClick">You Own 0 Auto Clickers</p>
<script>
function save() {
localStorage.setItem("cookiecount", cookiecount);
}
function load() {
cookiecount = localStorage.getItem("cookiecount");
cookiecount = parseInt(cookiecount);
update()
}
function buyAutoClick() {
if (cookiecount >= ((autoClick+1) * 12)) {
cookiecount = cookiecount – ((autoClick+1) * 12));
autoClick = autoClick + 1;
update()
}
}
</script>
</body>
</html><script>
function update() {
document.getElementById('text').value = cookiecount;
document.title = cookiecount + " Cookies";
document.getElementById('amountAutoClick'").innerHTML = "You Own " + autoClick " "Auto Clickers";
}
var cookiecount = 0;
var autoClick = 0;
function timer() {
cookiecount = cookiecount + autoClick;
update()
}
setInterval(timer, 1000)
</script>
<html>
<head><title>Cookie Game</title></head>
<body>
<a href=# onclick="add()"><img src="cookie.jpg"></a>
you got:
<input type="text" id="text" disabled style= text-align:center>
<script>
function add() {
cookiecount = cookiecount + 1
update()
}
</script>
Cookies
<br><br>
<button><a href="#" onClick="Save()">Save</a></button>
<button><a href="#" onClick="Load()">Load</a></button>
<br><br>
<p>Buy 1 Auto Clicker</p>
<button><a href="#" onClick="buyAutoClick"><img src="Cursor.jpg" width="70px" height="65px">
</a><button>
<p id="costAutoClick">Cookies</p>
<p id="amountAutoClick">You Own 0 Auto Clickers</p>
<script>
function save() {
localStorage.setItem("cookiecount", cookiecount);
}
function load() {
cookiecount = localStorage.getItem("cookiecount");
cookiecount = parseInt(cookiecount);
update()
}
function buyAutoClick() {
if (cookiecount >= ((autoClick+1) * 12)) {
cookiecount = cookiecount – ((autoClick+1) * 12));
autoClick = autoClick + 1;
update()
}
}
</script>
</body>
</html><script>
function update() {
document.getElementById('text').value = cookiecount;
document.title = cookiecount + " Cookies";
document.getElementById('amountAutoClick'").innerHTML = "You Own " + autoClick " "Auto Clickers";
}
var cookiecount = 0;
var autoClick = 0;
function timer() {
cookiecount = cookiecount + autoClick;
update()
}
setInterval(timer, 1000)
</script>
<html>
<head><title>Cookie Game</title></head>
<body>
<a href=# onclick="add()"><img src="cookie.jpg"></a>
you got:
<input type="text" id="text" disabled style= text-align:center>
<script>
function add() {
cookiecount = cookiecount + 1
update()
}
</script>
Cookies
<br><br>
<button><a href="#" onClick="Save()">Save</a></button>
<button><a href="#" onClick="Load()">Load</a></button>
<br><br>
<p>Buy 1 Auto Clicker</p>
<button><a href="#" onClick="buyAutoClick"><img src="Cursor.jpg" width="70px" height="65px">
</a><button>
<p id="costAutoClick">Cookies</p>
<p id="amountAutoClick">You Own 0 Auto Clickers</p>
<script>
function save() {
localStorage.setItem("cookiecount", cookiecount);
}
function load() {
cookiecount = localStorage.getItem("cookiecount");
cookiecount = parseInt(cookiecount);
update()
}
function buyAutoClick() {
if (cookiecount >= ((autoClick+1) * 12)) {
cookiecount = cookiecount – ((autoClick+1) * 12));
autoClick = autoClick + 1;
update()
}
}
</script>
</body>
</html>
My working version :
<!DOCTYPE html>
<html lang="pl-Pl">
<head>
<title>Cookie Game!</title>
<meta charset="utf-8">
<meta name="author" content="Seweryn Wienke">
<link rel="Shortcut icon" href="Cookie.png">
</head>
<body>
<a href=# onclick="add(1)"><img src="Cookie.png"></a><br><br>
You Got:
<input type="text" id="text" disabled style= "text-align:center"> Cookies.<br>
<a href=# onclick="u1_cursor()"><img src="Cookie.png" width="40px"></a><br>
<p> Cursor is: <span id="CursorCount">0</span> </p>
<p> Cost of next Cursor is: <span id="CursorCost">12</span> </p>
<a href=# onclick="save()">save</a>
<a href=# onclick="load()">load</a><br>
<button><a href="#" onclick="save()">Save</a></button>
<button><a href="#" onclick="load()">Load</a></button><br>
<button onclick="save()">Save Game</button>
<button onclick="load()">Load Save</button><br>
<script>
var cookiecount = 0;
var CursorCount = 0;
var CursorCost = 0;
load();
function add(x)
{
console.log(x);
document.getElementById('text').value = cookiecount += x;
document.title = cookiecount + ' Cookies';
document.getElementById("CursorCount").innerHTML = CursorCount;
document.getElementById("CursorCost").innerHTML = CursorCost;
}
function u1_cursor()
{
if (cookiecount>=CursorCost)
{
cookiecount = cookiecount – CursorCost;
CursorCount++;
CursorCost = CursorCost+12;
}
}
setInterval(function(){add(CursorCount);}, 1000);
function save()
{
localStorage.setItem("cookiecount", cookiecount);
localStorage.setItem("CursorCount", CursorCount);
localStorage.setItem("CursorCost", CursorCost);
console.log("save");
}
function load()
{
cookiecount=localStorage.getItem("cookiecount");
cookiecount=parseInt(cookiecount);
document.getElementById('text').value = cookiecount;
document.title = cookiecount + ' Cookies';
console.log("load");
CursorCount=localStorage.getItem("CursorCount");
CursorCount=parseInt(CursorCount);
document.getElementById("CursorCount").innerHTML = CursorCount;
console.log(CursorCount);
CursorCost=localStorage.getItem("CursorCost");
CursorCost=parseInt(CursorCost);
document.getElementById("CursorCost").innerHTML = CursorCost;
}
</script>
</body>
</html>
Part 2 Saving: 4:59
4:03 i cant click my cookie
my cookie's(computer in my case) number is 99 and it is not not updating when i press on my computer here is my code btw it also says in the console that that every button is not defined:
<!DOCTYPE html>
<script>
function update() {
document.getElementById('text').value = computercount;
document.title = computercount + " Computers";
document.getElementById('amountProgrammer').innerHTML = "You Own " + Programmer + " Programmers";
}
var computercount = 0;
var Programmer = 0;
function timer() {
computercount + computercount = autoClick
update()
}
setInterval(timer, 1000)
</script>
<html>
<head>
<title>Computer Company</title>
</head>
<body>
<a href=# onclick="add()">
<img src="comp.jpeg" alt="clicker" align="left" width="500" height="500"> </a>
<br><br>
<h1>You got:</h1>
<input type="text" id="text" disabled style= "text-align:center; height:150px; width:250px; font-size: 400%; color: blue; font-weight: bold;" >
<script>
function add() {
computercount = computercount + 1
update()
}
</script>
Computers.
<br><br>
<button><a href="#"onClick="save()">Save</a></button>
<button><a href="#"onClick="load()">Load</a></button>
<br><br>
<p>Hire a Programmer</p>
<button><a href="#" onClick="buyProgrammer()"><img src=Programmer.jpg width="60px" height="40px">
</a></button>
<p id="Programmers"> Computers</p>
<p id=amountProgrammer>You Own 0 Programmers</p>
<script>
function save() {
localStorage.setItem("computercount", computercount);
}
function load() {
computercount =localStorage.getItem("computercount");
computercount = parseInt(computercount);
update()
}
function buyProgrammers() {
if (computercount >= (Programmer+1) * 12 )) {
computercount = computercount – ((Programmer+1) * 12);
Programmer = Programmer + 1;
update()
}
}
</script>
</body>
</html>
i don’t wanna be that guy but instead of using <a> for a clickable image, you can do
<img src” “ onclick=“name()”>
just wanna make everyone try less lol
you don’t need a button either
5:30 saved
Whenever I save and Load with my autoclikers i get NaN which I know stands for 'Not a number' but i don't really understand why it shows this
it says cookiecount not defined 🙁 it says exactly this:
Uncaught ReferenceError: cookiecount is not defined
at add (index.html:25)
at HTMLAnchorElement.onclick (VM96 index.html:19)
add @ index.html:25
onclick @ VM96 index.html:19
and pretty much the same thing for every button:( please help. if someone cant help me very soon im deleting all my progress and finding another video
Hey, just so you know, you don't have to use <button><a href="#" class="blah" onclick="bruh">B U Y</a></button>. You can store all the info and inside the button element. So the code would look like this: <button id="id" class="class" onclick="randomfunction">B U Y</button>
guys repeat the tutorial if your are giving err0r, for me itss working perfectly
Button VS Buton