Javascript: Output table

本文关键字：table Output Javascript 更新时间：2023-09-26

我有一些javascript代码，可以从用户那里获取一些数据，然后将平均值和其他统计数据输出为document.write。我希望它输出到同一页面上。这是代码：

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

非常感谢

詹姆斯

<!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;
	  
	  var result_html = "";
	  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>";
	  
	  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;
    }
	#ValueAnswer{
		color:#000;
	}
  </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>

不要

直接使用document.write，您可以使用document.createElement('p')创建一个新元素并附加到您的文档中。