以HTML动态显示JavaScript数组
[英]Display JavaScript Array Dynamically in HTML
问题描述
I'm a beginner at this. 
我是初学者。 I have a web design assignment (using Javascript and HTML5) that requires me to use a do while loop to prompt the user to enter a month and the amount of steps taken for that month. 我有一个Web设计任务（使用Javascript和HTML5），要求我使用do while循环来提示用户输入一个月以及该月要执行的步骤。 This should dynamically populate a list in my HTML so the site should be displaying two columns with the values being input. 这应该动态地在我的HTML中填充一个列表，因此该站点应该显示两列并输入值。 For example: 例如：
Steps Entered: 输入的步骤：
Month: Steps: 月：步骤：
May 15000 15000年5月
June 20000 20000年6月
July 25000 25000年7月
... and so on... ... 等等...
Total Steps: 60000 总步骤数：60000
My code isn't working. 我的代码无法正常工作。
EDIT: Current problem is that it seems to be stuck in an endless loop. 编辑：当前的问题是它似乎陷入了一个无休止的循环。 'done' does not stop the prompt boxes and nothing is being populated on the site. “完成”不会停止提示框，并且网站上没有任何内容。
Can anyone shed some light please? 有人可以给我一些启示吗？ Thank you in advance! 先感谢您！
Here's my code: 这是我的代码：
<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"> </span></p> <p>Steps<br> <span id="slog"> </span></p> <p>Total Steps: <span id="totalS"> </span></p> </section> </body> </html>
2 个解决方案
解决方案1
2 2016-10-12 15:59:47
You test months[m] after you do m++ ,so there should be months[m-1] . 您在执行m++ 之后测试months[m] ，所以应该有months[m-1] 。 Better move that outside of loop. 最好将其移出循环。
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"> </span> </p> </section> </body> </html>
解决方案2
0 2016-10-12 16:13:02
If you check months[m] with console.log it's indefined, so you should check with months[m-1] If you necessary should use do while your script will looks like this: 如果使用console.log检查months[m]是未定义的，则应使用months[m-1]检查。如果有必要，请使用do，而脚本将如下所示：
<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>
And in the end it will still asks after you write 'done'. 最后，在您写完“ done”后仍会询问。 It's gonna be better just with while(). 仅使用while（）会更好。 So if it's not necessary to use do while - use only while. 因此，如果没有必要使用while，请仅使用while。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.