Question

扩展了上一个问题，并且每天输出的例外工作正常。当用户输入补充包的每周/每日摄入量时，它应显示到屏幕，直到达到输入的天数。如果用户输入2周和3天（每周拍摄的天数），则输出应如下所示：

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....

我的代码一直在写第1周。我确信这很简单，我忽略了。也许是每周输入的变量？到目前为止我的代码...感谢您的帮助。

<!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>

Answer 1

使用document.createElement方法动态创建和排序输出div。 JSFiddle demo.

首先将<div id="output1"></div>，... 2，... 3和... 4 div替换为：

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

...然后将getSup函数与此交换：

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>";
}

这与原始内容大致相同，但我已经删除旧的innerHTML作业并将var移到功能的顶部以反映实际变量范围。

Answer 2

你覆盖了html，你不会像在循环中一样追加它。

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

应该是

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

但是这不会产生你想要的输出，因为它们是相同的部分。你真的应该在页面上添加新的元素。

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

为什么输出会被覆盖此javascript

2 个答案: