我的JavaScript计算器代码无法运行，该如何排查定位故障？

存在的问题及修复方案 #

1. JavaScript语法错误（即你怀疑的integerDisplay相关逻辑） #

• 错误1：getDisplayNumber方法中给integerDisplay赋值的语句缺失等号，直接触发语法报错
  原错误代码：

  integerDisplay integerDigits.toLocaleString('en', {maximumFractionDigits: 0 })
  

  修复为：

  integerDisplay = integerDigits.toLocaleString('en', {maximumFractionDigits: 0 })
  

• 错误2：取小数位的代码括号位置错误，永远无法正常获取小数部分
  原错误代码：

  const decimalDigits = stringNumber.split('.'[1])
  

  修复为：

  const decimalDigits = stringNumber.split('.')[1]
  

• 错误3：带小数的返回值用了原始的integerDigits没有用格式化后的integerDisplay，会导致千分位格式不生效
  原错误代码：

  return `${integerDigits}.${decimalDigits}`
  

  修复为：

  return `${integerDisplay}.${decimalDigits}`
  

2. HTML结构错误 #

数字按钮重复写了两次4，缺少了数字3的按钮，修改第一行数字按钮部分即可：
原错误代码：

<button data-number>1</button>
<button data-number>2</button>
<button data-number>4</button>
<button data-operation>*</button>

修复为：

<button data-number>1</button>
<button data-number>2</button>
<button data-number>3</button>
<button data-operation>*</button>

3. 脚本加载顺序错误 #

你把script.js的引入放在了head标签里，页面加载时DOM还没渲染完成，JS找不到对应DOM元素会触发报错。两种修复方案选一个即可：

• 方案1：把<script src="script.js"></script>移到</body>标签之前
• 方案2：给现有script标签加defer属性：<script src="script.js" defer></script>

修复以上问题后计算器即可正常运行。

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