为购物车添加金额限制规则时prompt输入后无结果输出问题

问题原因及修复方案 #

你的代码存在3处核心错误，导致无法正常输出购物车内容：

• 计数器i使用const关键字声明，const用于定义不可修改的常量，执行i++操作时会直接抛出类型错误，导致后续逻辑全部中断，这是你看不到任何结果的核心原因，需要将声明改为let i = 0。
• 购物车渲染逻辑错误，循环中每次直接对innerHTML赋值，会覆盖上一次写入的内容，最终仅会展示最后一个输入的水果，需要改为内容累加或者一次性输出整个数组的内容。
• 未处理非法输入场景，如果用户输入的内容不在banana/grape/apple范围内，sum的值不会增长，会导致无限弹出输入框，无法进入后续渲染逻辑，需要补充非法输入的处理分支。

修正后完整代码 #

<html>
<body>

<h2>basket</h2>

<p id="myBasket"></p>

<script>
const Basket = [];
let sum = 0;
let i = 0;
while(sum <= 10){
  const inputFruit = prompt("Enter a fruit name");
  // 处理用户点击取消的情况，避免死循环
  if(inputFruit === null) break;
  Basket[i] = inputFruit;
  switch(Basket[i])
  {
    case "banana":
      sum += 5;
      break;
    case "grape":
      sum += 3;
      break;
    case "apple":
      sum += 2;
      break;
    // 处理非法输入
    default:
      alert("仅支持输入banana、grape、apple三种水果");
      // 非法输入不计入数组，回退i的值
      Basket.pop();
      i--;
  }
  i++;
}
// 一次性输出所有购物车内容，用顿号分隔
document.getElementById("myBasket").innerHTML = Basket.join('、');
</script>

</body>
</html>

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