Else 语句工作一次并停止答案

【问题标题】：Else statement works once and stopsElse 语句工作一次并停止
【发布时间】：2021-10-31 07:25:23
【问题描述】：

我试图让球长到 400，当它达到 400 时，它会逐渐缩小到 100（每次点击时 -50）。 Else 语句只工作一次然后停止（100>150>200>250>300>350>400>350 然后停止）。

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>

【问题讨论】：

检查你自己的逻辑
你减去了 50，这使它再次小于 400。所以在下一次迭代中……

标签： javascript html

【解决方案1】：

在函数之外建立一个布尔值来跟踪球的大小是在增长还是在缩小。另外，在ball2宽度和高度的末尾添加“px”以动态改变大小。

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>

【讨论】：

【解决方案2】：

您可以将大小是否应减小存储在变量中。然后，使用if 语句检查大小是否为 400。如果是，则将该变量设置为 true。如果大小为 100，则将该变量设置为 false。

然后使用另一个if 语句根据该变量增加/减少大小。

<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>

【讨论】：