You can store whether the size should decrease in a variable. Then, use an if statement to check whether the size is 400. If it is, set that variable to true. If the size is 100, set that variable to false.
Then use another if statement to increase/decrease the size in accordance to that variable.
<html>
<head>
<title>Challenge</title>
<style>
body {
background-color: black;
text-align: center;
}
h1 {
color: white;
}
div {
width: 100px;
height: 100px;
margin: auto;
margin-bottom: 10px;
border-radius: 50%;
transition: 0.3s;
line-height: 50px;
}
.ball2 {
background-color: orange;
}
</style>
</head>
<body>
<h1>The Ball</h1>
<div class="ball2" onclick="onBall2Click()">TOGGLE</div>
<script>
var ball2Size = 100;
var ball2SizeStep = 50;
var shouldShrink = false;
function onBall2Click() {
var ball2 = document.querySelector(".ball2");
if (ball2Size == 400) {
shouldShrink = true;
} else if (ball2Size == 100) {
shouldShrink = false;
}
if (!shouldShrink) {
ball2Size = ball2Size + 50;
} else {
ball2Size = ball2Size - 50;
}
ball2.innerText = ball2Size;
ball2.style.width = ball2Size;
ball2.style.height = ball2Size;
}
</script>
</body>
</html>
Establish a boolean value outside of the function to keep track of whether the ball size is growing or shrinking. Also, add “px” to the end of the ball2 width and height to dynamically change the size.
let ball2Size = 100
const ball2SizeStep = 50
let growing = true
const ball2 = document.querySelector('.ball2')
function onBall2Click()
{
if (ball2Size < 400 && growing)
{
ball2Size += ball2SizeStep
growing = ball2Size < 400
}
else
{
ball2Size -= ball2SizeStep
growing = ball2Size <= 100
}
ball2.innerText = ball2Size
ball2.style.width = `${ball2Size}px`
ball2.style.height = `${ball2Size}px`
}
body {
background-color: black;
font-family: sans-serif;
}
h1 {
color: white;
text-align: center;
}
.ball2 {
background-color: orange;
width: 100px;
height: 100px;
margin: auto;
margin-bottom: 10px;
border-radius: 50%;
transition: 0.3s;
display: flex;
align-items: center;
justify-content: center;
}
<h1>The Ball</h1>
<div class="ball2" onclick="onBall2Click()">TOGGLE</div>
I’m trying to make the ball grow up to 400 and when it reaches 400 it’ll gradually shrink to 100 (-50 each time I click). The Else statement works only once and then stops (100>150>200>250>300>350>400>350 and then it stops).
var ball2Size = 100;
var ball2SizeStep = 50;
function onBall2Click() {
var ball2 = document.querySelector(".ball2");
if (ball2Size < 400) {
ball2Size = ball2Size + 50;
} else {
ball2Size = ball2Size - 50;
}
ball2.innerText = ball2Size;
ball2.style.width = ball2Size;
ball2.style.height = ball2Size;
}
body {
background-color: black;
text-align: center;
}
h1 {
color: white;
}
div {
width: 100px;
height: 100px;
margin: auto;
margin-bottom: 10px;
border-radius: 50%;
transition: 0.3s;
line-height: 50px;
}
.ball2 {
background-color: orange;
}
<h1>The Ball</h1>
<div class="ball2" onclick="onBall2Click()">TOGGLE</div>
You’re subtracting 50, which makes it less than 400 again. So on the next iteration…
