JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title>Cookie</title>
</head>
<body>
<h1 id="CookieAmount"></h1>
<h2 id="CookiePerSecond"></h2>
<div id="cookie" style="cursor:pointer" onclick="cookieClicked();"><img src="http://img1.wikia.nocookie.net/__cb20130827014912/cookieclicker/images/thumb/5/5a/PerfectCookie.png/250px-PerfectCookie.png"></div>
<button onclick="getAutoClicker();">Purchase Auto Clicker for <span id="AutoClickCookieCost"></span></button>
<button onclick="getAutoClickerTwo();">Purchase Auto Clicker Two for <span id="AutoClickCookieCostTwo"></span></button>
</body>
<script>
var cookieClicks = 0;
var clickValue = 1;
var AutoClickers = 0;
var AutoClickerCost = 10;
function cookieClicked() {
cookieClicks++;
}
//Purchases Auto Clicker for Player and removes Cookies.
function getAutoClicker(){
if(cookieClicks >= AutoClickerCost){
AutoClickers++;
cookieClicks -= AutoClickerCost;
AutoClickerCost += Math.floor(AutoClickerCost*.3);
} else{
alert("Oh No! It appears you do not have enough cookies to purchase an Auto Clicker. An Auto Clicker currently costs "+AutoClickerCost+" which is "+(AutoClickerCost-cookieClicks)+" more cookies than you have.")
}
}
var AutoClickTimer = setInterval(function () {AutoClickCookie()}, 1000);
function AutoClickCookie(){
cookieClicks += AutoClickers;
}
//Side Loop updating button costs and CPS
var CookieClickTimer = setInterval(function() {updateCookie()}, 100);
function updateCookie(){
//Calculate CPS
var CPS = (AutoClickers*4);
document.getElementById("CookieAmount").innerHTML = cookieClicks+" cookies.";
document.getElementById("CookiePerSecond").innerHTML = CPS+" CPS.";
document.getElementById("AutoClickCookieCost").innerHTML = AutoClickerCost;
}
</script>