I'm learning to make a cookie clicker.
With the click of a button, I want to change the src (which works as intended) and onclick function of id 'cookie'.
Rather than applying a new function to the id 'cookie', it applies the addScore() function to the button itself. The buttons being referred to are id 'changeTierOne' and 'changeTierTwo'.
What should happen is the user clicks a button, changeTier() is activated which changes the innerHTML and applies a new src and onclick to id 'cookie' and then on the click of the image (id 'cookie'), the score for a specific class callback increases.
```
class Tier {
constructor(increaseBy, score, unit, tierName, src) {
this.increaseBy = increaseBy;
this.score = score;
this.unit = unit;
this.tierName = tierName;
this.src = src;
}
addScore() {
this.score += this.increaseBy;
document.getElementById('score').innerHTML = this.unit + ': ' + this.score;
}
changeTier() {
document.getElementById('score').innerHTML = this.unit + ': ' + this.score;
document.getElementById('currentTier').innerHTML = this.tierName;
document.getElementById('cookie').src = this.src;
document.getElementById('cookie').onclick = this.addScore.bind(this)();
}
}
let original = new Tier(1, 0, 'Cookie crumbs', 'Original Madness!', 'assets/tier_one_icon.webp');
let crunchy = new Tier(2, 0, 'Cookie bites', 'the Crunchy Verse!', 'assets/tier_two_icon.webp');
if (original.score < 10) {
document.getElementById('changeTierTwo').innerHTML = 'Earn 10 cookie crumbs to unlock!';
} else {
document.getElementById('changeTierTwo').innerHTML = 'Unlock the crunchy cookie now!';
};
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cookie Clicker</title>
<link rel="icon" href="assets/tier_one_icon.webp">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body class="container">
<div class="row">
<h2 id="score">Click the cookie to begin!</h2>
<p class="font-color">Welcome to <span id="currentTier">Original Madness!</span></p>
</div>
<div class="row" id="cookieContainer">
<div id="cookie-icon-box" class="col-9">
<img id="cookie" src="assets/tier_one_icon.webp" alt="Tier One" class="img-fluid mx-auto d-block" onclick="original.addScore.bind(original)()">
</div>
<div class="col-3">
<button id="changeTierOne" onclick="original.changeTier.bind(original)()">Level One</button>
<button id="changeTierTwo" onclick="crunchy.changeTier.bind(crunchy)()">Level Two</button>
</div>
</div>
<script src="tier.js"></script>
<script src="script.js"></script>
</body>
</html>
```
What I have tried:
I have tried changing the entire HTML to entirely set a new image with a new onclick for each class callback, which did not work as intended.
Submit an article or tip