如何在加载 JavaScript 之前加载 HTML/使用提示要求用户输入

问题描述 投票：0回答：1

我需要页面像这样运行：HTML 加载，第一个提示要求用户输入。提示提交，运行总计发生变化，页面显示。询问第二个提示，提交，然后运行总计更改并再次显示。最后的提示也是如此。我相信一切都工作得很好，除了我找不到一种方法可以在加载所有 HTML 后显示提示，以及在每次提示后更新和显示总数。我尝试过 window.onload、setTimeout、DOMContentLoader 等，但似乎都不起作用。

HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reno Calculator</title>
    <script src="homerenovation.js" defer></script>
</head>

<body>
    <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>
    
</body>
</html>

Javascript：

function addPaintAndSupplies(totalCost, callback) {
    let cost = prompt("Enter the cost for the paint and supplies :");
    cost = parseFloat(cost);
    if (cost > 100){
        cost *= 1.1;
    }
    // Get a handle for the paint paragraph
    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;
    }
    // Get a handle for the floor coverings paragraph
    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;
    }
    // Get a handle for the furniture paragraph
    let furnitureArea = document.querySelector(".furniture");
    furnitureArea.innerHTML = `Furniture $ ${cost.toFixed(2)}`;
    callback(totalCost + cost);
    return (totalCost + cost);
}

const updateTotals = (cost) => {
    // Get a handle for the total cost header
    let totalsArea = document.querySelector(".totalCost");
    totalsArea.innerHTML = `Total $ ${cost.toFixed(2)}`;
}

    let totalCost = 0;
    totalCost = addPaintAndSupplies(totalCost, updateTotals);
    totalCost = addFloorCoverings(totalCost, updateTotals);
    totalCost = addFurniture(totalCost, updateTotals);
javascript html function callback prompt
1个回答
0
投票

您可以使用 Window 的 

load
事件 等待文档渲染，然后再提示用户输入，并且可以无延迟地使用 
setTimeout
 来允许 DOM 在输入之间更新。如果没有 
setTimeout
，所有三个输入都会在同一事件循环中处理，并且 DOM 无法在其间更新。

function addPaintAndSupplies(totalCost, callback) {
  let cost = prompt("Enter the cost for the paint and supplies :");
  cost = parseFloat(cost);
  if (cost > 100) {
    cost *= 1.1;
  }
  // Get a handle for the paint paragraph
  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;
  }
  // Get a handle for the floor coverings paragraph
  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;
  }
  // Get a handle for the furniture paragraph
  let furnitureArea = document.querySelector(".furniture");
  furnitureArea.innerHTML = `Furniture $ ${cost.toFixed(2)}`;
  callback(totalCost + cost);
  return (totalCost + cost);
}

const updateTotals = (cost) => {
  // Get a handle for the total cost header
  let totalsArea = document.querySelector(".totalCost");
  totalsArea.innerHTML = `Total $ ${cost.toFixed(2)}`;
}

let totalCost = 0;
window.addEventListener("load", () => {
  totalCost = addPaintAndSupplies(totalCost, updateTotals);
  setTimeout(() => {
    totalCost = addFloorCoverings(totalCost, updateTotals);
    setTimeout(() => {
      totalCost = addFurniture(totalCost, updateTotals);
    })
  })
})
<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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.