CODEWITHSUNDEEP
javascriptarrayshtml
marie1485
marie1485

Reputation: 1

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. This should dynamically populate a list in my HTML so the site should be displaying two columns with the values being input. For example:

Steps Entered:

Month: Steps:

May 15000
June 20000
July 25000
... and so on...

Total Steps: 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">&nbsp;</span></p>
				<p>Steps<br>
				<span id="slog">&nbsp;</span></p>
				<p>Total Steps: <span id="totalS">&nbsp;</span></p>
		</section>
	</body>	
</html>

Upvotes: 0

Views: 241

Answers (2)

Dimava
Dimava

Reputation: 10841

You test months[m] after you do m++,so there should be 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">&nbsp;</span>
    </p>
  </section>
</body>

</html>

Upvotes: 2

Kasmetski
Kasmetski

Reputation: 705

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:

<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'. It's gonna be better just with while(). So if it's not necessary to use do while - use only while.

Upvotes: 0

Related Questions