Javascriptループを2つのセクションに分割

フォームの入力番号をHTMLでプルして特定の方法で表示する必要があります。例：ユーザーは訓練された週= 2、訓練された日= 3を入力します.Javascriptを使用して、時間の量をプロンプトして特定の方法で表示する必要があります。Javascriptループを2つのセクションに分割

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

出力が言っている：

週1

トレーニング時間.......

トレーニング時間.. .....

トレーニング時間........

週1つの小計........

週1日最大.........

週2

トレーニング時間................

トレーニング時間..............

トレーニング時間.. ..........

週1つの小計...................

週1日最大..............

総練習時間...........

私はループが正しく表示されるように助けが必要です。私はそれを1 divに表示すると仮定しています。それは、配列のメソッドを使用して合計、最小、および最大を見つけるのは簡単だ

for(var i = 1; i <= weeks; i++){ 
    var arrHours = []; 
    for(var j = 1; j <= days; j++){ 
     getHours = parseFloat(prompt("Enter the training hours for week " + i + " day " + j)); 
     arrHours.push(getHours); 
    } 
    var outputDiv = document.getElementById("output"); 
    outputDiv.innerHTML += "Week " + i + "<br />"; 
    outputDiv.innerHTML += arrHours.map(function(x, index) { 
     return "Training hours for day " + (index + 1) + " = " + x + "<br>"; 
    }).join("<br />"); 
}

この方法：ありがとう

出典

2016-06-24 govCode

あなたは作業フィドルをしてください作成することはできますか？または少なくともあなたのhtmlを投稿してください –

私のHTMLを追加 – govCode

は、入力時に小計と合計を構築ソリューションです：

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>

出典

2016-06-25 00:05:45 trincot

ありがとう、私は助けてくれてありがとう – govCode

あなたはこのために、配列を使用することができます。ここで

出典

2016-06-24 21:32:42

Javascriptループを2つのセクションに分割

答えて

関連する問題