I have a button, and a counter. The counter is assigned count. When you click the button counterPlusElem, the count increases. You can buy upgrades that take away some of your count, but make it so on each click of counterPlusElem, it adds 2 to count instead of 1. The background-image property changes once a certain count threshold has been met, or that's the goal. Once the image has changed from car1.png to car2.png, I don't want it to be able to switch back. The problem is that once you have enough count, you reach car4.png, then it starts reverting again.
Thanks.
Code :
function levelUp() {
if (count >= 0 && count < 10) {
imageCount1++;
console.log("imageCount1 + 1");
}
if (imageCount1 > 0 && imageCount2 < 1) {
counterPlusElem.style.backgroundImage = "url('car1.png')";
imageCount2 = 0; // Reset other image counts
imageCount3 = 0;
imageCount4 = 0;
imageCount5 = 0;
imageCount6 = 0;
imageCount7 = 0;
}
if (count >= 10 && count < 100) {
imageCount2++;
console.log("imageCount2 + 1");
}
if (imageCount2 > 0 && imageCount3 < 1) {
counterPlusElem.style.backgroundImage = "url('car2.png')";
imageCount1 = 0; // Reset other image counts
imageCount3 = 0;
imageCount4 = 0;
imageCount5 = 0;
imageCount6 = 0;
imageCount7 = 0;
}
if (count >= 100 && count < 1000) {
imageCount3++;
console.log("imageCount3 + 1");
imageCount2 = 0;
}
if (imageCount1 < 1 && imageCount2 < 1 && imageCount3 > 0 && imageCount4 < 1) {
counterPlusElem.style.backgroundImage = "url('car3.png')";
imageCount1 = 0; // Reset other image counts
imageCount2 = 0;
imageCount4 = 0;
imageCount5 = 0;
imageCount6 = 0;
imageCount7 = 0;
}
if (count >= 1000 && count < 10000) {
imageCount4++;
console.log("imageCount4 + 1");
imageCount3 = 0;
}
if (imageCount1 < 1 && imageCount2 < 1 && imageCount3 < 1 && imageCount4 > 0 &&
imageCount5 < 1) {
counterPlusElem.style.backgroundImage = "url('car4.png')";
imageCount1 = 0; // Reset other image counts
imageCount2 = 0;
imageCount3 = 0;
imageCount5 = 0;
imageCount6 = 0;
imageCount7 = 0;
}
if (count >= 10000 && count < 50000) {
imageCount5++;
console.log("imageCount5 + 1");
imageCount4 = 0;
}
if (imageCount1 < 1 && imageCount2 < 1 && imageCount3 < 1 && imageCount4 < 1 &&
imageCount5 > 0 && imageCount6 < 1) {
counterPlusElem.style.backgroundImage = "url('car5.png')";
imageCount1 = 0; // Reset other image counts
imageCount2 = 0;
imageCount3 = 0;
imageCount4 = 0;
imageCount6 = 0;
imageCount7 = 0;
}
if (count >= 50000 && count < 100000) {
console.log("imageCount6 + 1");
imageCount6++;
imageCount5 = 0;
}
if (imageCount1 < 1 && imageCount2 < 1 && imageCount3 < 1 && imageCount4 < 1 &&
imageCount5 < 1 && imageCount6 > 0 && imageCount7 < 1) {
counterPlusElem.style.backgroundImage = "url('car6.png')";
imageCount1 = 0; // Reset other image counts
imageCount2 = 0;
imageCount3 = 0;
imageCount4 = 0;
imageCount5 = 0;
imageCount7 = 0;
}
if (count >= 100000 && count < 200000) {
imageCount7++;
console.log("imageCount7 + 1");
imageCount6 = 0;
}
if (imageCount1 < 1 && imageCount2 < 1 && imageCount3 < 1 && imageCount4 < 1 &&
imageCount5 < 1 && imageCount6 < 1 && imageCount7 > 0) {
counterPlusElem.style.backgroundImage = "url('car7.png')";
imageCount1 = 0; // Reset other image counts
imageCount2 = 0;
imageCount3 = 0;
imageCount4 = 0;
imageCount5 = 0;
imageCount6 = 0;
}
}