HTML Create a Cookie Clicker Site - Part 2 The Upgrades - playegndary.com

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:

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.)

27 Comments

  1. 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)"

  2. Thank you! Really appreciate this tutorial! 🙂

  3. if you keep spamming the load button it will give you free autoclickers

  4. 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>

  5. I got the error : Uncaught TypeError: Cannot set property 'innerHTML' of null

  6. So in mine, I can have negative cookies. How do I fix this?

  7. 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

  8. 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>

  9. 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>

  10. 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>

  11. 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>

  12. 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

  13. 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

  14. 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

  15. 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>

  16. guys repeat the tutorial if your are giving err0r, for me itss working perfectly

Leave a Reply

Your email address will not be published.