Почему цикл и массив перестают работать после добавления innerHTML? - PullRequest
Новая
       52

Почему цикл и массив перестают работать после добавления innerHTML?

0 голосов
/ 08 ноября 2019

Все отлично работает, кроме внутреннего HTML. Я получаю имя от родителя, но как только я добавляю innerHTMl в код, оно не работает. Я хочу получить innerHTML от каждого родителя в цикле, массиве ..., я не знаю, почему он не работает, где я не прав?

Пример: 

function myFunction() {
  var divs = Array.prototype.slice.call(document.getElementById("container").querySelectorAll('*'));
  var divsname = Array.prototype.slice.call(document.getElementsByClassName("parent"));
  var divshtml = Array.prototype.slice.call(document.getElementsByClassName("parent")).querySelectorAll('*').innerHTML;
  // Loop over the array
  var results = "";
  var name = "";
  divsname.forEach(function(div) {
    name += div.getAttribute("name");
    var innerhtml = "";
    divs.forEach(function(div) {
      innerhtml += divshtml;
    });
    results = "<br> Div element" + name + "have innerHTML" + innerhtml + ".";

  });

  document.getElementById("demo").innerHTML = results;
}
<div id="container">
  <div class="parent" name="parentone">
    <div id="childone" style="height:10px">
      <div id="childtwo" style="background-color:red"></div>
    </div>
  </div>
  <div class="parent" name="parenttwo">
    <div id="childthree" style="height:10px"></div>
  </div>
</div>
<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

Пожалуйста, помогите мне с этим вопросом.

Спасибо

Ответы [ 2 ]

0 голосов
/ 08 ноября 2019

, поскольку document.getElementByClassName не является функцией, вы должны попробовать с идентификатором 

  var divshtml = Array.prototype.slice.call(document.getElementById("parent").querySelectorAll('*'));

в HTML: 

  <div id="parent" name="parenttwo" >
0 голосов
/ 08 ноября 2019

попробуйте: 

function myFunction() {
  var divs = Array.prototype.slice.call(document.getElementById("container").querySelectorAll('*'));
  var divsname = Array.prototype.slice.call(document.getElementsByClassName("parent"));
  
  var temp = document.querySelectorAll("*");
  var divshtml = Array.prototype.slice.call(temp).innerHTML;
  // Loop over the array
  var results = "";
  var name = "";
  divsname.forEach(function(div){
    name += div.getAttribute("name");
  var innerhtml = "";
  divs.forEach(function(div){
    innerhtml += divshtml;
  });
    results = "<br> Div element" + name + "have innerHTML" + innerhtml;

  });

  document.getElementById("demo").innerHTML = results ; 
}

querySelectorAll - это метод для элементов DOM, который принимает селектор CSS и возвращает статический NodeList соответствующих элементов.

Array.prototype.slice.call - это один из способовпревратить этот NodeList (который действует как массив, но не имеет методов из Array.prototype) в реальный массив.

...