Well, you see here I need help with getting this
<upgrade1>
<button type="button" class="button button1">
<a>Money Upgrade:</a>
<a id="money">1</a>
<p>Cost: $<a id="money cost">2.00</a></p>
</button>
</upgrade1>to appear when you get to $2.00 and stay appeared. Also, I want the amount of money you have not to go below $0.00 and I want help with some other things as well. So here is the rest of the code you will need to help me:
HTML:
<body>
<p>Money: $<a id="clicks">0.00</a></p>
<hr>
<img src="Money.png" alt="Increase Money" title="Click Me to increase the Money." type="button" onclick="moneyOne()" class="clicked">
<hr>
<upgrade1>
<button type="button" class="button button1">
<a>Money Upgrade:</a>
<a id="money">1</a>
<p>Cost: $<a id="money cost">2.00</a></p>
</button>
</upgrade1>
<script src="script.js"></script>
</body>Javascript:
var clicks = 0.00;
var money = 1
var moneycost = 2.00
var timer;
var img = document.querySelector(".clicked");
function moneyOne() {
clicks += 0.01;
document.getElementById("clicks").innerHTML = clicks.toFixed(2);
img.classList.add("active");
if (timer) window.clearTimeout(timer);
timer = window.setTimeout(function() {
img.classList.remove("active");
}, 200);
};
function moneyUpgrades() {
if (clicks = 2.00)
document.getElementById("money").innerHTML = money;
document.getElementById("moneycost").innerHTML = moneycost;
money += 1;
moneycost += 2.00
clicks -= 2.00
};CSS:
.clicked {
width: 410px;
height: 200px;
transition: all .2s ease-in-out;
transform: scale(1);
}
.clicked.active {
transform: scale(.6);
}
.button {
position: absolute;
z-index: 1;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button1:hover {
background-color: #008CBA;
color: white;
}
upgrade1 {
display: none;
}Also, if you see anything wrong or not necessary with my coding please tell me.
