Javascript：出力表

ユーザーからデータを取得して平均とその他の統計をdocument.writeとして出力するJavaScriptコードがあります。私は同じページに出力したいと思います。ここでは、コードは次のとおりです。Javascript：出力表

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script> 
 
    function statisticsCalc() { 
 

 
     var count = 0; 
 
     var sum = 0; 
 
     var average = 0; 
 
     var min = 99999999; 
 
     var max = -99999999; 
 

 
     var num = prompt("Enter a number, or enter a blank to end"); 
 
     while (num != "") { 
 
     count++; 
 
     num = Number(num); 
 
     sum += num; 
 

 
     if (num < min) { 
 
      min = num; 
 
     } 
 
     if (num > max) { 
 
      max = num; 
 
     } 
 

 
     num = prompt("Enter a number, or enter a blank to end"); 
 
     } 
 

 
     var average = sum/count; 
 
     Math.round(average * 100)/100; 
 

 
     document.write("You entered " + count + " numbers." + "<br>" + "<br>"); 
 
     document.write(" The smallest number was " + min + ", and the largest number was " + max + "." + "<br>" + "<br>"); 
 
     document.write(" The difference between the max and min was " + (max - min) + "." + "<br>" + "<br>"); 
 
     document.write(" The sum of the entries was " + sum + "." + "<br>" + "<br>"); 
 
     document.write(" The average number was " + average + "." + "<br>" + "<br>"); 
 
    } 
 
    </script> 
 
    <style> 
 
    ul { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     background-color: #333; 
 
    } 
 
    li { 
 
     float: left; 
 
    } 
 
    li a { 
 
     display: block; 
 
     color: white; 
 
     text-align: center; 
 
     padding: 14px 55px; 
 
     text-decoration: none; 
 
    } 
 
    li a:hover { 
 
     background-color: #111; 
 
    } 
 
    .tasks { 
 
     color: white; 
 
     font-size: 250%; 
 
     text-align: center; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body background="wallpaper.png"> 
 

 
    <ul> 
 
    <li><a class="active" href="index_page.html">Home</a> 
 
    </li> 
 
    <li><a href="task1.html">Task 1</a> 
 
    </li> 
 
    <li><a href="task2.html">Task 2</a> 
 
    </li> 
 
    <li><a href="task3.html">Task 3</a> 
 
    </li> 
 
    <li><a href="task4.html">Task 4</a> 
 
    </li> 
 
    <li><a href="task5.html">Task 5</a> 
 
    </li> 
 
    <li><a href="task6.html">Task 6</a> 
 
    </li> 
 
    <li><a href="task7.html">Task 7</a> 
 
    </li> 
 
    </ul> 
 

 

 
    <div class='tasks'> 
 
    <div class='container'> 
 
     <h1>Task 6</h1> 
 
     <h3> Enter some numbers, when your finished enter a blank </h3> 
 
     <button onclick="statisticsCalc()">Go</button> 
 
     <p id="ValueAnswer"></p> 
 

 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

多くのおかげ

ジェームズ

出典

2016-04-27 james_nika

あなたはボタンの下にタグを作成し、その中にそれらのメッセージを追加することはできませんか？ – Dhara

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script> 
 
    function statisticsCalc() { 
 

 
     var count = 0; 
 
     var sum = 0; 
 
     var average = 0; 
 
     var min = 99999999; 
 
     var max = -99999999; 
 

 
     var num = prompt("Enter a number, or enter a blank to end"); 
 
     while (num != "") { 
 
     count++; 
 
     num = Number(num); 
 
     sum += num; 
 

 
     if (num < min) { 
 
      min = num; 
 
     } 
 
     if (num > max) { 
 
      max = num; 
 
     } 
 

 
     num = prompt("Enter a number, or enter a blank to end"); 
 
     } 
 

 
     var average = sum/count; 
 
     Math.round(average * 100)/100; 
 
\t 
 
\t var result_html = ""; 
 
\t result_html += "You entered " + count + " numbers." + "<br>" + "<br>"; 
 
     result_html += " The smallest number was " + min + ", and the largest number was " + max + "." + "<br>" + "<br>"; 
 
     result_html += " The difference between the max and min was " + (max - min) + "." + "<br>" + "<br>"; 
 
     result_html += " The sum of the entries was " + sum + "." + "<br>" + "<br>"; 
 
     result_html += " The average number was " + average + "." + "<br>" + "<br>"; 
 
\t 
 
\t document.getElementById("ValueAnswer").innerHTML = result_html; 
 

 
     
 
    } 
 
    </script> 
 
    <style> 
 
    ul { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     background-color: #333; 
 
    } 
 
    li { 
 
     float: left; 
 
    } 
 
    li a { 
 
     display: block; 
 
     color: white; 
 
     text-align: center; 
 
     padding: 14px 55px; 
 
     text-decoration: none; 
 
    } 
 
    li a:hover { 
 
     background-color: #111; 
 
    } 
 
    .tasks { 
 
     color: white; 
 
     font-size: 250%; 
 
     text-align: center; 
 
    } 
 
\t #ValueAnswer{ 
 
\t \t color:#000; 
 
\t } 
 
    </style> 
 
</head> 
 

 
<body background="wallpaper.png"> 
 

 
    <ul> 
 
    <li><a class="active" href="index_page.html">Home</a> 
 
    </li> 
 
    <li><a href="task1.html">Task 1</a> 
 
    </li> 
 
    <li><a href="task2.html">Task 2</a> 
 
    </li> 
 
    <li><a href="task3.html">Task 3</a> 
 
    </li> 
 
    <li><a href="task4.html">Task 4</a> 
 
    </li> 
 
    <li><a href="task5.html">Task 5</a> 
 
    </li> 
 
    <li><a href="task6.html">Task 6</a> 
 
    </li> 
 
    <li><a href="task7.html">Task 7</a> 
 
    </li> 
 
    </ul> 
 

 

 
    <div class='tasks'> 
 
    <div class='container'> 
 
     <h1>Task 6</h1> 
 
     <h3> Enter some numbers, when your finished enter a blank </h3> 
 
     <button onclick="statisticsCalc()">Go</button> 
 
     <p id="ValueAnswer"></p> 
 

 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

出典

2016-04-27 12:00:04

あなたがdocument.createElement('p')を使用して新しい要素を作成し、文書化し、あなたに追加することができ、直接document.writeを使用しないでください。

出典

2016-04-27 11:59:54 mashuai

答えて

関連する問題