如何先加载HTML再执行JavaScript并通过prompt获取用户输入

问题根源 #

1. HTML未加载完成就弹出prompt：原代码直接在全局作用域调用计算函数，JS执行时DOM元素还未完全渲染，导致页面未显示就弹出输入框，同时可能出现querySelector无法找到目标元素的情况。
2. 总价无法正常更新：本质是DOM未加载完成时，无法获取到.totalCost等元素，导致更新操作失效。

修复方案 #

核心是确保所有DOM元素加载完成后再执行交互逻辑，同时保留原有计算逻辑。

修改后的完整代码 #

HTML与JS整合代码

<h1>Reno calculator <img src="2chicks.jpg"></h1>

<p class="paint" style="background-color:grey;"></p>
<p class="furniture" style="background-color:pink;"></p>
<p class="floorCoverings"></p>
<h3 class="totalCost"></h3>

<script>
function addPaintAndSupplies(totalCost, callback) {
  let cost = prompt("Enter the cost for the paint and supplies :");
  cost = parseFloat(cost);
  if (cost > 100) {
    cost *= 1.1;
  }
  let paintArea = document.querySelector(".paint");
  paintArea.innerHTML = `Paint $ ${cost.toFixed(2)}`;
  callback(totalCost + cost);
  return (totalCost + cost);
}

const addFloorCoverings = function(totalCost, callback) {
  let cost = prompt("Enter the cost for the floor coverings :");
  cost = parseFloat(cost);
  if (cost < 500) {
    cost *= .85;
  }
  let floorCoveringsArea = document.querySelector(".floorCoverings");
  floorCoveringsArea.innerHTML = `Floor Coverings $ ${cost.toFixed(2)}`;
  callback(totalCost + cost);
  return (totalCost + cost);
}

const addFurniture = (totalCost, callback) => {
  let cost = prompt("Enter the cost for the furniture :");
  cost = parseFloat(cost);
  if (cost < 500) {
    cost *= .90;
  }
  let furnitureArea = document.querySelector(".furniture");
  furnitureArea.innerHTML = `Furniture $ ${cost.toFixed(2)}`;
  callback(totalCost + cost);
  return (totalCost + cost);
}

const updateTotals = (cost) => {
  let totalsArea = document.querySelector(".totalCost");
  totalsArea.innerHTML = `Total $ ${cost.toFixed(2)}`;
}

// 等待DOM完全加载后执行交互逻辑
document.addEventListener('DOMContentLoaded', function() {
  let totalCost = 0;
  totalCost = addPaintAndSupplies(totalCost, updateTotals);
  totalCost = addFloorCoverings(totalCost, updateTotals);
  totalCost = addFurniture(totalCost, updateTotals);
});
</script>

关键修改说明 #

• 用document.addEventListener('DOMContentLoaded', ...)包裹执行逻辑，确保HTML所有元素渲染完成后再触发第一个prompt，解决页面未加载就弹出输入框的问题。
• DOM加载完成后，querySelector能正确获取到所有目标元素，总价更新和分项内容更新的逻辑即可正常执行。

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