Need some help with the function onBall3Click1 (code is at the bottom).
The ball should act like a lightbulb: ON - turn YELLOW, OFF - turn GRAY.
I've been trying to figure out the logic behind it for so long and can't seem to find the issue...
Even though the text changes to 'ON' when clicked, the color stays gray instead of turning yellow as expected.
Your assistance is greatly appreciated!
<html>
<head>
<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;
color: black
}
.ball1 {
background-color: yellow;
border: 6px solid gray;
color: black
}
.ball2 {
background-color: orange;
}
.ball3 {
background-color: gray;
}
.ball4 {
background-color: brown;
}
</style>
</head>
<body>
<h1>The Ball</h1>
<div class="ball1" onclick="onBall1Click()">
GROW 250 ORANGE
</div>
<div class="ball2" onclick="onBall2Click()">
GROW+50 SHRINK-50
</div>
<div class="ball3" onclick="onBall3Click1()">
OFF
</div>
<div class="ball4" onclick="onBall4Click()">
PROMPT
</div>
<script>
var ball1Size = 100;
var ball1SizeStep = 50;
function onBall1Click() {
var ball1 = document.querySelector('.ball1');
ball1Size = ball1Size + 50;
if (ball1Size > 400) {
ball1Size = 100;
}
ball1.innerText = ball1Size;
ball1.style.width = ball1Size;
ball1.style.height = ball1Size;
ball1.innerText = ball1Size;
if (ball1Size == 250) {
ball1.style.color = 'Orange';
} else {
ball1.style.color = 'black'
}
}
var ball2Size = 100;
var ball2SizeStep = 50;
function onBall2Click() {
var ball2 = document.querySelector('.ball2');
ball2Size += ball2SizeStep;
if (ball2Size === 400) {
ball2SizeStep = -50;
} else if (ball2Size === 100) {
ball2SizeStep = 50;
}
if (ball2Size > 100) {
ball2.style.backgroundColor = 'red';
} else if (ball2Size === 100) {
ball2.style.backgroundColor = 'Orange';
}
ball2.innerText = ball2Size;
ball2.style.width = ball2Size;
ball2.style.height = ball2Size;
}
function onBall3Click1() {
var ball3 = document.querySelector('.ball3');
console.log("Hi there");
if (ball3.innerText == 'OFF') {
ball3.innerText = 'ON';
} else if (ball3.innerText == 'ON') {
ball3.innerText = 'OFF'
}
console.log(ball3.style.backgroundColor)
if (ball3.style.backgroundColor === 'gray') {
console.log("Color change happening now...");
ball3.style.backgroundColor = 'Yellow';
} else if (ball3.style.backgroundColor == 'Yellow') {
console.log("Another color change in progress...");
ball3.style.backgroundColor = 'gray'
}
}
var ball4Size = 100;
function onBall4Click() {
var ball4 = document.querySelector('.ball4');
var user_input = prompt('Enter the size number for ball 4 but keep it reasonable : ')
let user_input_int = parseInt(user_input)
console.log(user_input_int);
if (user_input_int < 1000) {
ball4.style.width = user_input_int;
ball4.style.height = user_input_int;
} else {
alert("That's too big!");
}
}
</script>
</body>
</html>