CODEWITHSUNDEEP
javascripthtmlfunction
allendks45
allendks45

Reputation: 341

Why is the output being overwritten for this javascript

Expanded a previous question and it is working fine with the exception to the daily output. As the user enters each week/daily intake of supplement packs it should display to screen until the number of days entered is met. If a user input 2 weeks and 3 days (number of days packs were taken each week) the output should look like:

Week 1
Number of packs taken on Day 1 = 2
Number of packs taken on Day 2 = 1
Number of packs taken on Day 3 = 3

Week 2
Number of packs taken on Day 1 = 1 etc....

My code keeps writing over Week 1. I'm sure this is something simple that I overlooked. Maybe a variable to hold each weeks input? My code thus far...thanks for the help.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Daily Supplement Intake Log</title>
<script>
function getSup() {
    var numWeeks = parseInt(document.getElementById("week").value);
    var daysPerWeek = parseInt(document.getElementById("day").value);
    var sum = 0; 
    var i = 0; 
    var total = 0; 

    while(i < numWeeks) {
       var d = 0; 
       var grandTotal = 0; 
       var maxPacks = 0; 
    var highDay = 0; 
    while(d < daysPerWeek){
        var packsTaken = prompt("Enter the number of packs taken on week " + (i + 1) + " and day "+ (d + 1), "");
        total = parseInt(packsTaken);
        document.getElementById("output2").innerHTML+="Number of packs  for day " + (d + 1) + " = " + total + "<br />";

            if(packsTaken > maxPacks){
                maxPacks = packsTaken;
                highDay = d;
                }
        sum += total;
        d++;
    }
    grandTotal += sum;
    i++;
    document.getElementById("output1").innerHTML="Week " + i + "<br />";
    document.getElementById("output3").innerHTML="Week " + i + " 
    subtotal is " + sum + " supplement packs." + "<br>" 
    + "Week " + i + " largest day is " + maxPacks + " packs, on day " + d + "<br>";
}
document.getElementById("output4").innerHTML="The total for these weeks  
is " + grandTotal + " supplement packs." + "<br>";
}

</script>
<body>
<header><h1>Daily Supplement Packet Log</h1></header><br>
<section>
<div class="align">
<label>Number of weeks:</label>
<input type="text" name="textbox" id="week" value=""><br>
<label>Number of days per week:</label>
<input type="text" name="textbox" id="day" value=""><br></div>
<div id="button">
<button type="button" id="log" onclick="getSup()">Enter number of packs  
taken each day</button></div> 
</section>
<div id="output1"></div>
<div id="output2"></div>
<div id="output3"></div>
<div id="output4"></div>
</body>
</html>

Upvotes: 0

Views: 151

Answers (2)

bloodyKnuckles
bloodyKnuckles

Reputation: 12089

Using document.createElement method to dynamically create and order output divs. JSFiddle demo.

First replace your <div id="output1"></div>, ...2, ...3, and ...4 divs with:

<div id="outputs"></div>
<div id="total"></div>

...and then swap your getSup function with this:

function getSup() {
    var numWeeks = parseInt(document.getElementById("week").value);
    var daysPerWeek = parseInt(document.getElementById("day").value);
    var sum = 0; 
    var i = 0; 
    var total = 0; 
    var d = 0; 
    var grandTotal = 0; 
    var maxPacks = 0; 
    var highDay = 0; 
    var packsTaken;
    var tempDiv, weekListText
    var outputs = document.getElementById("outputs");

    while(i < numWeeks) {
        d = 0; 
        grandTotal = 0; 
        maxPacks = 0; 
        highDay = 0; 
        weekListText = '';
        while(d < daysPerWeek){
            packsTaken = prompt("Enter the number of packs taken on week " + (i + 1) + " and day "+ (d + 1), "");
            total = parseInt(packsTaken);
            //document.getElementById("output2").innerHTML+="Number of packs  for day " + (d + 1) + " = " + total + "<br />";
            weekListText += "Number of packs  for day " + (d + 1) + " = " + total + "<br />";

            if(packsTaken > maxPacks){
                maxPacks = packsTaken;
                highDay = d;
            }
            sum += total;
            d++;
        }
        grandTotal += sum;
        i++;

        //document.getElementById("output1").innerHTML="Week " + i + "<br />";
        tempDiv = document.createElement('div');
        tempDiv.innerHTML = "Week " + i;
        outputs.appendChild(tempDiv);

        // formerly known as output2    
        tempDiv = document.createElement('div');
        tempDiv.innerHTML = weekListText;
        outputs.appendChild(tempDiv);

        //document.getElementById("output3").innerHTML="Week " + i + "subtotal is " + sum + " supplement packs." + "<br>" + "Week " + i + " largest day is " + maxPacks + " packs, on day " + d + "<br>";
        tempDiv = document.createElement('div');
        tempDiv.innerHTML = "Week " + i + "subtotal is " + sum + " supplement packs." + "<br>" + "Week " + i + " largest day is " + maxPacks + " packs, on day " + d + "<br>";
        outputs.appendChild(tempDiv);

    }
    document.getElementById("total").innerHTML="The total for these weeks is " + grandTotal + " supplement packs." + "<br>";
}

This is mostly the same as the original, but I've rem'ed out the old innerHTML assignments and moved the vars up to the top of the function to reflect actual variable scope.

Upvotes: 1

epascarello
epascarello

Reputation: 207527

You overwrite the html, you do not append to it like you do in the loop.

document.getElementById("output1").innerHTML="Week " + i + "<br />";
document.getElementById("output3").innerHTML="Week " + i + "

should be

document.getElementById("output1").innerHTML += "Week " + i + "<br />";
document.getElementById("output3").innerHTML += "Week " + i + ";

but that is not going to make the output you want since they are the same sections. You really should be appending new elements to the page.

var header = document.createElement("h2");
header.innerHTML = "Week " + i;
document.getElementById("output1").appendChild(header);

var div = document.createElement("div");
div.innerHTML = "new content";
document.getElementById("output1").appendChild(div);

Upvotes: 0

Related Questions