如何让span元素显示值？排查JS中'document未定义'错误

看起来你遇到了两个核心问题：一是ESLint提示的'document' is not defined代码检查警告，二是页面上的#estimate span始终没有显示估算金额。咱们一步步来解决：

一、搞定ESLint的'document' is not defined警告 #

这个警告是ESLint的“安全检查”在起作用——它默认不知道浏览器的全局对象（比如document、window）。你不需要改功能，只要告诉ESLint这些是合法的全局变量就行：
在你的JS文件最顶部加一行注释：

/* global document, window */

这样ESLint就不会再揪着这个点报错了，这只是代码检查的提示，不是页面功能失效的直接原因，但解决它能让你的代码更规范。

二、修复估算金额不显示的功能bug #

你的JS代码里有几个逻辑和事件绑定的错误，导致计算功能根本没跑起来：

1. toggleMembook函数的语法错误 #

这个函数里的三元运算符有个低级错误：

(document.getElementById("membook").checked === false) ? totalCost -= 250 : totalCost + 250;

后面的totalCost + 250只是做了加法，但没把结果赋值给totalCost！应该改成totalCost += 250，这样选中纪念册时才会正确增加费用：

(document.getElementById("membook").checked === false) ? totalCost -= 250 : totalCost += 250;

2. 页面加载事件绑定错了对象 #

你用了document.addEventListener("load", resetForm, false);，但load事件应该绑定在window对象上，而不是document。修改成：

window.addEventListener("load", function() {
  createEventListeners();
  resetForm();
}, false);

另外，resetForm里别再调用createEventListeners()了——否则每次重置表单都会重复绑定事件，导致同一个操作触发多次计算，把那行删掉就行。

3. 确保初始金额能正确计算 #

修改后的resetForm函数应该是这样：

function resetForm() {
  document.getElementById("photognum").value = 1;
  document.getElementById("photoghrs").value = 2;
  document.getElementById("membook").checked = memoryBook;
  document.getElementById("reprodrights").checked = reproductionRights;
  document.getElementById("distance").value = 0;
  calcStaff(); // 重置后立刻计算初始费用
}

这样页面加载完成后，resetForm会设置默认值并调用calcStaff()，初始的估算金额就会显示出来了。

4. 可选优化：缓存DOM元素（让代码更高效） #

你可以把常用的DOM元素提前缓存起来，避免每次函数调用都重复获取，比如在全局添加：

// 全局缓存DOM元素，减少重复查询
const photognumEl = document.getElementById("photognum");
const photoghrsEl = document.getElementById("photoghrs");
const distanceEl = document.getElementById("distance");
const membookEl = document.getElementById("membook");
const reprodrightsEl = document.getElementById("reprodrights");
const estimateEl = document.getElementById("estimate");

然后在函数里直接用这些变量（比如photognumEl.value），代码会更简洁高效。

修复后的完整JS代码示例 #

/* global document, window */
// 全局变量
var photographerCost = 0;
var totalCost = 0;
var memoryBook = false;
var reproductionRights = false;

// 缓存DOM元素
const photognumEl = document.getElementById("photognum");
const photoghrsEl = document.getElementById("photoghrs");
const distanceEl = document.getElementById("distance");
const membookEl = document.getElementById("membook");
const reprodrightsEl = document.getElementById("reprodrights");
const estimateEl = document.getElementById("estimate");

// 根据工作人员数量计算所有费用并累加到总费用
function calcStaff() {
  const num = photognumEl.value;
  const hrs = photoghrsEl.value;
  const distance = distanceEl.value;
  totalCost -= photographerCost;
  photographerCost = num * 100 * hrs + distance * num;
  totalCost += photographerCost;
  estimateEl.innerHTML = "$" + totalCost;
}

// 从总费用中添加/扣除纪念册费用
function toggleMembook() {
  membookEl.checked === false ? totalCost -= 250 : totalCost += 250;
  estimateEl.innerHTML = "$" + totalCost;
}

// 从总费用中添加/扣除照片复制权费用
function toggleRights() {
  reprodrightsEl.checked === false ? totalCost -= 1250 : totalCost += 1250;
  estimateEl.innerHTML = "$" + totalCost;
}

// 将所有表单字段值设置为默认值
function resetForm() {
  photognumEl.value = 1;
  photoghrsEl.value = 2;
  membookEl.checked = memoryBook;
  reprodrightsEl.checked = reproductionRights;
  distanceEl.value = 0;
  calcStaff();
}

// 创建事件监听器
function createEventListeners() {
  photognumEl.addEventListener("change", calcStaff, false);
  photoghrsEl.addEventListener("change", calcStaff, false);
  membookEl.addEventListener("change", toggleMembook, false);
  reprodrightsEl.addEventListener("change", toggleRights, false);
  distanceEl.addEventListener("change", calcStaff, false);
}

// 页面加载时初始化
window.addEventListener("load", function() {
  createEventListeners();
  resetForm();
}, false);

按照这些修改后，页面的估算功能应该就能正常工作，ESLint的警告也会消失啦！

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