За последнее время написал немало, а прочёл ещё больше javascript-кода, как хорошего, так и плохого. Но самое большое впечатление на меня производит код, который не объявляет локальные переменные.
Итак, задача. Очень хочется вывести таблицу умножения для чисел от 0 до 9. Пишем код:
<body>
<div id="output">here</div>
<a href="javascript: putList();">Click</a>
</body>
function putList() {
text = "<ul>";
for (i = 0; i < 10; i++) {
text += "<li>" + putContent(i) + "</li>";
}
text += "</ul>";
document.getElementById('output').innerHTML = text;
}
function putContent(key) {
content = "";
for (i = 0; i < 10; i++) {
content += " " + i * key + " ";
}
return content;
}
И смотрим результат: 0 0 0 0 0 0 0 0 0 0 Как же так??? А где же таблица умножения!? Всё дело в том, что все переменные, используемые внутри функции и не объявленные при помощи var, помещаются в глобальное пространство имён. Таким образом обе эти функции используют одну и ту же переменную. После завершения работы putContent переменная i равна 10, и цикл в putList завершает свою работу. Чтобы код работал корректно, достаточно добавить var в объявления переменных.
function putList() {
var text = "<ul>";
for (var i = 0; i < 10; i++) {
text += "<li>" + putContent(i) + "</li>";
}
text += "</ul>";
document.getElementById('output').innerHTML = text;
}
function putContent(key) {
var content = "";
for (var i = 0; i < 10; i++) {
content += " " + i * key + " ";
}
return content;
}
И вот наша таблица умножения появляется по клику на ссылку.
Казалось бы, что может быть проще и элементарнее. НО! Об этом постоянно забывают и пишут код, который содержит логические ошибки, появление которых трудно предсказать.
Сообщения
