以HTML格式动态显示JavaScript数组

时间:2016-10-12 15:36:55

标签: javascript arrays html5

我是初学者。我有一个网页设计任务(使用Javascript和HTML5),要求我使用do while循环来提示用户输入一个月以及该月所采取的步骤数量。这应该动态填充我的HTML中的列表,以便该站点应显示两列,并输入值。例如:

输入的步骤:

月:步骤:

15000年5月 6月20000
7月25000

......等等......

总步数:60000

我的代码无效。
编辑:当前的问题是,它似乎陷入无休止的循环。 “完成”不会停止提示框,并且网站上没有任何内容。
请问有人可以解决一些问题吗?提前谢谢!

这是我的代码:

<script type = "text/javascript">
			function getSteps()
			{
				var months = new Array(); 
				var steps = new Array();
				var m = 0;
				var s = 0;
				var stepTotal = 0;
								
				do{
					months[m] = prompt("Enter a month or enter 'done' when finished:");
					document.getElementById("mlog").innerHTML = months[m] + "<br>";
					steps[s] = prompt("How many steps did you take?");
					document.getElementById("slog").innerHTML = steps[s] + "<br>";
					steps[s] = parseInt(steps[s]);
					stepTotal += steps[s];
					m++;
					s++;
				}while(months[m] != "done");
				document.getElementById("totalS").innerHTML = "Total Steps: " + stepTotal;
			}			
		</script>
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Monthly Steps Page</title>
		<meta charset="utf-8">
		
	</head>
	<body>
		<header>
			<h1>Count your steps!</h1>
		</header>
		<section>
			<h2>Click on the buttons below to enter the number of steps taken every month.</h2>
			<button onclick="getSteps();">Steps Log</button><br><br>
				<p>Steps Entered:</p>
				<p>Month<br>
				<span id="mlog">&nbsp;</span></p>
				<p>Steps<br>
				<span id="slog">&nbsp;</span></p>
				<p>Total Steps: <span id="totalS">&nbsp;</span></p>
		</section>
	</body>	
</html>

2 个答案:

答案 0 :(得分:2)

您在months[m] 后测试m++ ,因此应该months[m-1]。 最好在循环之外移动。

function getSteps() {
  var months = new Array();
  var steps = new Array();
  var m = 0;
  var s = 0;
  var stepTotal = 0;
  var month = prompt("Enter a month or enter 'done' when finished:");
  while (month && month != 'done') //pressed [cancel], empty or "done"
  {
    months.push(month); //months[m] = month;
    //document.getElementById("mlog").innerHTML += months[m] + "<br>";
    var step /*steps[s]*/ = parseInt(prompt("How many steps did you take?")) || 0; //0 replaces NaN
    //document.getElementById("slog").innerHTML += steps[s] + "<br>";
    document.getElementById("tablelog").innerHTML += "<tr><td>" + month + "</td><td>" + step + "</td></tr>";
    steps.push(step); //steps[s] = parseInt(steps[s]);
    stepTotal += step;
    m++;
    s++;
    month = prompt("Enter a month or enter 'done' when finished:");
  }
  document.getElementById("totalS").innerHTML = stepTotal;
}
table,
td,
tr,
th {
  border: 1px solid black;
  border-collapse: collapse;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Monthly Steps Page</title>
  <meta charset="utf-8">

</head>

<body>
  <header>
    <h1>Count your steps!</h1>
  </header>
  <section>
    <h2>Click on the buttons below to enter the number of steps taken every month.</h2>
    <button onclick="getSteps();">Steps Log</button>
    <br>
    <br>
    <table>
      <tbody id="tablelog">
        <tr>
          <th colspan=2>Steps Entered:</th>
        </tr>
        <tr>
          <th>Month</th>
          <th>Steps</th>
        </tr>
      </tbody>
    </table>
    <p>Total Steps: <span id="totalS">&nbsp;</span>
    </p>
  </section>
</body>

</html>

答案 1 :(得分:0)

如果您使用console.log检查months[m-1]它是未定义的,那么您应该检查<script type = "text/javascript"> function getSteps() { var months = new Array(); var steps = new Array(); var m = 0; var s = 0; var stepTotal = 0; do{ months[m] = prompt("Enter a month or enter 'done' when finished:"); document.getElementById("mlog").innerHTML = months[m] + "<br>"; steps[s] = prompt("How many steps did you take?"); document.getElementById("slog").innerHTML = steps[s] + "<br>"; steps[s] = parseInt(steps[s]); stepTotal += steps[s]; m++; s++; console.log(m); console.log(s); console.log(months[m]); }while (months[m-1] != "done"); document.getElementById("totalS").innerHTML = "Total Steps: " + stepTotal; } </script> 如果您需要使用do,那么您的脚本将如下所示:

alias

最后,在你写完“完成”之后,它仍然会问。用while()会更好。因此,如果没有必要使用do while - 只使用while。