I’m new to javascript and don’t understand why I get a function after my tags as output when I’m looping in a collection when I call getElementByTagName();
I’m a noob in English so here is a snippet to figure you out what’s my question and my issue.
function div1ParaElems() {
const div1 = document.getElementById("div1");
const div1Paras = div1.getElementsByTagName("div");
const num = div1Paras.length;
alert(`There are ${num} paragraph in #div1`);
let out = document.getElementById("output");
for (let i in div1Paras){
out.innerHTML += div1Paras[i] + "<br>";
div1Paras[i].addEventListener("click",alertMe);
}
}
function alertMe(e){
alert(e.target.innerHTML);
}*{
box-sizing: border-box;
}
.flexTest{
display: flex;
flex: auto;
flex-wrap: wrap;
align-items: flex-start;
/*justify-content: space-around;*/
/*justify-content: space-between;*/
border:1px solid #D2D2D2;
background-color: burlywood;
}
.flexTest div{
background-color: antiquewhite;
padding:10px;
margin:10px;
display: flex;
flex: content;
border:1px solid #D2D2D2;
}<body onLoad="div1ParaElems()">
<div id="div1" class="flexTest">
<div>
Tatactic - Nicolas 1
</div>
<div>
Tatactic - Nicolas 2
</div>
<div>
Tatactic - Nicolas 3
</div>
<div>
Tatactic - Nicolas 4
</div>
<div>
Tatactic - Nicolas 5
</div>
<div>
Tatactic - Nicolas 6
</div>
<div>
Tatactic - Nicolas 7
</div>
<div>
Tatactic - Nicolas 8
</div>
</div>
<div id="output"></div>
</body>Why do I get function item() { [native code] } at the end of my output even if it’s not a div element???
Thank you in advance for your time and your patience!
Output contains 9 elements and not 8 as expected.
[object HTMLDivElement]
[object HTMLDivElement]
[object HTMLDivElement]
[object HTMLDivElement]
[object HTMLDivElement]
[object HTMLDivElement]
[object HTMLDivElement]
[object HTMLDivElement]
function item() { [native code] }
>Solution :
This is because you’re using for..in, which treats div1Paras as an object, iterating over its properties (including length, the item method, etc). You probably want to use for..of instead.
for (let div of div1Paras) {
out.innerHTML += div + "<br>";
div.addEventListener("click", alertMe);
}