JS实现点击小球增长至400px后自动收缩的代码问题排查

代码存在的问题 #

• 逻辑完全不符合需求：没有设置控制增长/收缩的方向变量，else分支的ball2Size - 150是无赋值的无效表达式，不会修改尺寸变量的值，已定义的步长变量ball2SizeStep也未被使用。
• 样式赋值缺少单位：给width和height赋值时未添加px单位，浏览器无法识别该样式，尺寸变化不会生效。
• 边界判断逻辑错误：当前超过400就减100的逻辑，既无法实现持续收缩，也不符合"相同幅度变化"的要求。

修正后的代码 #

仅需替换原有JS代码即可，CSS和HTML无需修改：

var 
  ball2Size     = 100,
  ball2SizeStep = 50,
  isGrowing     = true // 控制尺寸变化方向，初始为增长状态
;

function onBall2Click() {
  var ball2 = document.querySelector('.ball2');
  // 按当前方向修改尺寸
  ball2Size = isGrowing ? ball2Size + ball2SizeStep : ball2Size - ball2SizeStep;
  // 到达边界时切换方向
  if (ball2Size >= 400) {
    isGrowing = false;
  } else if (ball2Size <= 100) {
    isGrowing = true;
  }
  // 样式赋值带单位，同步修改行高保证文字垂直居中
  ball2.innerText = ball2Size;
  ball2.style.width = ball2Size + 'px';
  ball2.style.height = ball2Size + 'px';
  ball2.style.lineHeight = ball2Size + 'px';
}

修正后即可实现需求：点击橙色小球，先每次按50的幅度增长，到400后每次点击按相同的50幅度收缩，收缩回100后自动切换为增长状态，循环往复。

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