Почему выходной файл перезаписывается для этого javascript

Разместил предыдущий вопрос и работает отлично, за исключением ежедневного вывода. Когда пользователь вводит каждую неделю/ежедневный прием дополнительных пакетов, он должен отображаться на экране до тех пор, пока не будет выполнено количество введенных дней. Если пользовательский ввод 2 недели и 3 дня (количество дней, пакеты были приняты каждую неделю) результат должен выглядеть следующим образом:Почему выходной файл перезаписывается для этого javascript

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>

источник

2015-03-24 allendks45

Почему вы используете html-комментарии в JavaScript? – epascarello

Можете ли вы исправить свой код, чтобы он соответствовал тому, что вы на самом деле используете? Есть много блуждающих разрывов строк, и эти комментарии HTML могут привести к ошибкам синтаксического анализа. – Pointy

Удалено все комментарии. Не знаю, зачем я это делаю ... просто делай, извини. – allendks45

Использование document.createElement метод для динамического создания и вывода заказа дивы. JSFiddle demo.

сначала заменим <div id="output1"></div> ... 2 ... 3 и 4 ... дивы с:

<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 s вверху функции, чтобы отразить действительную область переменной.

источник

2015-03-24 17:45:52 bloodyKnuckles

Скрипка работает, как я хочу. Попытка понять, что на самом деле происходит, когда данные вводятся и выводятся для отображения. Очень ценю ... собираюсь переварить ваш код на некоторое время. Благодаря! – allendks45

Вы перезаписываете 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);

источник

2015-03-24 16:33:48 epascarello

Это не исправляет. Он хочет, чтобы каждая неделя имела строку заголовка и подробные строки. Ваше решение помещает все строки заголовка вместе в один div, все строки подробностей вместе в следующем div и т. Д. –

Точно, я хочу раздел для каждого ввода недели. В конце концов, я улучшаю свои навыки, надеясь, возможно, привязаться к базе данных. – allendks45

Причина, по которой вы видите это поведение, состоит в том, что вы буквально переписываете то, что уже есть. Всякий раз, когда вы делаете 'document.getElementById (« output1 »). InnerHTML =« вещи »;', вы переписываете то, что было в этом div раньше. Ответ правильный: последняя половина объясняет, как вы можете добавлять элементы на страницу, что вы хотите сделать, а не просто переписывать то, что там есть. И для дальнейших ссылок вы должны скопировать код ТОЧНО, как вы его запускаете - по какой причине вы добавили кучу комментариев, которые заставляют код не компилироваться? Оставьте только те комментарии, которые у вас уже есть. – Chrissi

Почему выходной файл перезаписывается для этого javascript

ответ

Смежные вопросы