#javascript #arrays #html
#javascript #массивы #HTML
Вопрос:
Я новичок в этом. У меня есть задание на веб-дизайн (с использованием Javascript и HTML5), которое требует, чтобы я использовал цикл do while, чтобы предложить пользователю ввести месяц и количество шагов, предпринятых за этот месяц. Это должно динамически заполнять список в моем HTML, поэтому на сайте должны отображаться два столбца с вводимыми значениями. Например:
Введенные шаги:
Месяц: шаги:
Май 15000
Июнь 20000
Июль 25000
… и так далее…
Всего шагов: 60000
Мой код не работает.
РЕДАКТИРОВАТЬ: текущая проблема заключается в том, что он, похоже, застрял в бесконечном цикле. ‘done’ не останавливает окна подсказок, и на сайте ничего не заполняется.
Может кто-нибудь пролить свет, пожалуйста? Заранее благодарю!
Вот мой код:
<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">amp;nbsp;</span></p>
<p>Steps<br>
<span id="slog">amp;nbsp;</span></p>
<p>Total Steps: <span id="totalS">amp;nbsp;</span></p>
</section>
</body>
</html> Комментарии:
1. «Мой код не работает». Не могли бы вы уточнить, в чем проблема, пожалуйста? например, приведите пример того, что вы ожидаете от него, по сравнению с тем, что он на самом деле делает прямо сейчас. В противном случае людям приходится внимательно просматривать все это или догадываться.
2. @ADyson Мои извинения! Я обновил его! Спасибо!
3. это document.getElementById, а не document.getElementById. Не используйте заглавную букву D.
4. @peerbolte Спасибо! Я это исправил. Теперь он, похоже, застрял в бесконечном цикле. ‘done’ не останавливает окна подсказок, и на сайте ничего не заполняется.
Ответ №1:
Вы тестируете 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 amp;amp; 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">amp;nbsp;</span>
</p>
</section>
</body>
</html> Комментарии:
1. также используйте = вместо = для добавления текста в innerHTML
Ответ №2:
Если вы проверите 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>
И в конце концов он все равно будет запрашивать после того, как вы напишете «готово». Это будет лучше только с помощью while() . Поэтому, если нет необходимости использовать do while — используйте только while .