Html Question posted in
Some basic documentation can be found here.

How to load HTML before loading JavaScript/Asking user for input using prompt

I need the page to run like this: The HTML loads, and the first prompt asks user for input. Prompt is submitted, and the running total is changed and the page displays it. Second prompt is asked, submitted, and then running total is changed and displayed again. Same thing for the final prompt. I believe everything is working completely fine except I can’t find a way to make the prompts show up after all of the HTML is loaded, and for the total to update and be displayed after each prompt. I’ve tried window.onload, setTimeout, DOMContentLoader, etc. but none of them seem to work.

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);
Tags:

2

Answers


  1. 0

    You can use Window’s load event to wait for the document to render before prompting the user for input, and you can use setTimeout with no delay to allow the DOM to update between inputs. Without setTimeout, all three inputs are processed in the same event loop, and the DOM is unable to update in between.

    window.addEventListener("load", () => {
  totalCost = addPaintAndSupplies(totalCost, updateTotals);
  setTimeout(() => {
    totalCost = addFloorCoverings(totalCost, updateTotals);
    setTimeout(() => {
      totalCost = addFurniture(totalCost, updateTotals);
    })
  })
})

    Here’s a runnable example implemented this way

    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>
    Login or Signup to reply.
  2. 0

    Could you try this

    let totalCost = 0;
window.addEventListener("load", (e) => {
  totalCost = addPaintAndSupplies(totalCost, updateTotals);
  totalCost = addFloorCoverings(totalCost, updateTotals);
  totalCost = addFurniture(totalCost, updateTotals);
});

    As a good practice you should move the script tag to the line before the end of body tag </body>

    where-should-i-put-script-tags-in-html-markup

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search