Элемент HTML добавляется в Javascript для цикла, а затем удаляется при увеличении счетчика - PullRequest
Новая
       41

Элемент HTML добавляется в Javascript для цикла, а затем удаляется при увеличении счетчика

0 голосов
/ 07 мая 2018

Я работаю над решением для упражнения «зацикливание треугольника» в конце Eloquent JavaScript ch2.Книга просит записать вывод на консоль, но я хочу вместо этого распечатать вывод на веб-странице в виде div с id = "triangle".

Этот код печатает правильное количество хэшей.Проблема в том, что тег
, созданный в цикле for, загадочным образом удаляется при увеличении цикла в конечном выражении.То есть: если я пошагово выполняю код, hashPrint.appendChild (carriage) выполняется нормально в точке останова, но как только отладчик добирается до i ++, дочерний элемент
удаляется с веб-страницы. 

var hash = "";
var hashPrint = document.getElementById("triangle");
var carriage = document.createElement("br");

for (var i = 0; i < 7; i++) {
    hash += "#";
    var content = document.createTextNode(hash);
    hashPrint.appendChild(content); 
    hashPrint.appendChild(carriage);
}

Если я помещу объявление var carriage в цикл for, он работает нормально.Я знаю, что JS рекомендует избегать глобальной области видимости, в последнее время я много занимался программированием на Java, и мне показалось, что использование createElement ("br") в global может быть полезно, если я хочу использовать его в другом цикле.на странице.

Несмотря на то, что у меня уже есть решение этой проблемы, я хотел бы знать, почему последнее выражение в цикле for приведет к удалению дочернего узла.В основном, почему это не работает?Я искал объяснения безуспешно.

Ответы [ 2 ]

0 голосов
/ 07 мая 2018

Попробуйте клонировать узел или appendChild () его съест: 

var hash = "";
var hashPrint = document.getElementById("triangle");
var carriage = document.createElement("br");

for (var i = 0; i < 7; i++) {
    hash += "#";
    var content = document.createTextNode(hash);
    hashPrint.appendChild(content); 
    hashPrint.appendChild(carriage.cloneNode(true));
}

См .: https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

или, Почему при добавлении documentFragment необходимо использовать cloneNode?

0 голосов
/ 07 мая 2018

потому что вы добавляете один и тот же элемент, чтобы он заменял себя каждый раз, когда вы его используете. Вам нужно создавать новый для каждого использования. 

for (var i = 0; i < 7; i++) {
  hash += "#";
  var content = document.createTextNode(hash);
  hashPrint.appendChild(content);
  var carriage = document.createElement("br");
  hashPrint.appendChild(carriage);
}
...