JS实现点击小球尺寸增减时else语句仅执行一次就停止问题排查

问题根源 #

• 逻辑判断规则不完整：现有逻辑仅判断当前尺寸是否小于400就执行增量，当尺寸从400降到350时，会再次触发<400的条件重新开始增长，因此只会在350和400之间往复，无法持续降低到100，需要新增变量标记当前的尺寸变化方向。
• 样式赋值缺少单位：CSS宽高属性需要携带像素单位px才可以被浏览器正确解析，直接赋值数值会导致样式不生效。

修复后代码 #

var ball2Size = 100;
var ball2SizeStep = 50;
// 标记当前尺寸变化方向，true为增大，false为缩小
var isIncreasing = true;

function onBall2Click() {
  var ball2 = document.querySelector(".ball2");

  if (isIncreasing) {
    ball2Size += ball2SizeStep;
    // 增长到400阈值后切换为缩小状态
    if (ball2Size >= 400) {
      isIncreasing = false;
    }
  } else {
    ball2Size -= ball2SizeStep;
    // 缩小到100阈值后切换为增长状态
    if (ball2Size <= 100) {
      isIncreasing = true;
    }
  }

  ball2.innerText = ball2Size;
  // 赋值时补充px单位
  ball2.style.width = ball2Size + 'px';
  ball2.style.height = ball2Size + 'px';
}

修改后点击小球会从100每次加50增长到400，达到阈值后每次点击减50直到回落至100，之后再次进入增长循环，完全匹配需求。

内容的提问来源于stack exchange，提问作者NewbieAeg