我的问题是函数onBall3Click1(代码在底部(。
点击时，球应该起到灯泡的作用：当它打开时->球内的黄色，当它关闭时->灰色。
我已经为这么简单的事情报道了它背后的逻辑太久了，我就是找不到问题所在。。
当我点击它时，它会将文本更改为"on"，但颜色仍为灰色。。当它应该是黄色的时候。
提前感谢！
<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("HII0");
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("HII1");
ball3.style.backgroundColor = 'Yellow';
} else if (ball3.style.backgroundColor == 'Yellow') {
console.log("HII1");
ball3.style.backgroundColor = 'gray'
}
}
var ball4Size = 100;
function onBall4Click() {
var ball4 = document.querySelector('.ball4');
var user_input = prompt('Write ball size number 4 but do not exaggerate : ')
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("Too big!");
}
}
</script>
</body>
</html>您可以在onBall3Click1函数中合并这两个if/elf链，如下所示：
function onBall3Click1() {
var ball3 = document.querySelector('.ball3');
console.log("HII0");
if (ball3.innerText == 'OFF') {
ball3.innerText = 'ON';
ball3.style.backgroundColor = 'yellow';
} else if (ball3.innerText == 'ON') {
ball3.innerText = 'OFF'
ball3.style.backgroundColor = 'gray'
}
console.log(ball3.style.backgroundColor)
}