govCode govCode - 5 months ago 9
Javascript Question

Javascript loop split into 2 sections

I have to pull input numbers from a form in HTML and have it display a certain way. For example: The user enters weeks trained = 2 and days trained = 3. Using Javascript I have to prompt for the amount of hours and display it a certain way.

<script>
function trainingHours() {
var weeks = parseInt(document.input.weeks.value);
var days = parseInt(document.input.days.value);
var getHours = 0;
var lineHours = 0;
var totalHours = 0;
var outputP = document.getElementById("output1");
outputP.innerHTML = "Po trained " + weeks + " weeks and he trained " + days + " days per week";

for(var i = 1; i <= weeks; i++){
for(var j = 1; j <= days; j++){
getHours = parseFloat(prompt("Enter the training hours for week " + i + " day " + j));

var outputDiv = document.getElementById("output");
outputDiv.innerHTML += "Week " + i + "training hours for day " + j + " = " + getHours + "<br>";
}

}

}
</script>


HTML

<body>
<header>

<h1 id="title">Weekly Training Log</h1>
</header>
<main>
<form name="input" onsubmit="return false;">
<label for="weeks">Number of weeks Po trained: </label>
<input type="text" name="weeks" id="weeks"><br>
<label for="days">Number of days Po trained each week: </label>
<input type="text" name="days" id="days"><br>
<button onclick="trainingHours();">Enter Po's weekly training hours</button>
</form>

<div id="output"><br></div>
</main>
</body>


The output has to say:


Week 1

training hours.......

training hours.......

training hours........

week 1 subtotal........

week 1 largest day.........

Week 2

training hours................

training hour..............

training hour............

week 1 subtotal...................

week 1 largest day..............

Total training hours...................


I need help getting the loop to display properly. I am suppose to display it in 1 div. Thanks

Answer

Here is a solution that builds up the subtotals and total during input:

function trainingHours() {
  var weeks = +document.input.weeks.value;
  var days = +document.input.days.value;
  var getHours = 0;
  var subtotal, largestDayHours, largestDay;
  var totalHours = 0;
  var html = "Po trained " + weeks + " weeks and he trained " + days + " days per week<br>";

  for(var i = 1; i <= weeks; i++){
    html += 'Week ' + i + '<br>';
    subtotal = 0;
    largestDay = 0;
    largestDayHours = 0;
    for(var j = 1; j <= days; j++){
      getHours = +prompt("Enter the training hours for week " + i + " day " + j);
      subtotal += getHours;
      if (getHours > largestDayHours) {
        largestDayHours = getHours;
        largestDay = j;
      }
      html += "training hours for day " + j + " = " + getHours + "<br>";
    }
    html += "week " + i + " subtotal is " + subtotal + "<br>";
    html += "week " + i + " largest day training was " + largestDayHours + " hours, happened at day " + largestDay + "<br>";
    totalHours += subtotal;
  }
  html += "Total training hours over all weeks = " + totalHours;
  var outputDiv = document.getElementById("output");
  outputDiv.innerHTML = html;
}
<header>
  <h1 id="title">Weekly Training Log</h1>
</header>

<main>
  <form name="input" onsubmit="return false;">
    <label for="weeks">Number of weeks Po trained: </label>
    <input type="text"  name="weeks" id="weeks"><br>
    <label for="days">Number of days Po trained each week: </label>
    <input type="text"  name="days" id="days"><br>
    <button onclick="trainingHours();">Enter Po's weekly training hours</button>
  </form>

  <div id="output"><br></div>
</main>