0

So I am trying to make like an OS in javascript and yes, I know it would most likely be in HTML but I am working on something, so I had some trouble with it, especially with this simple little itty bitty code, I tried everything with and without and came with two errors. One was the one I put in the title and the second one was without using length and just putting a number, I put 1 in to see what happens. for the second error, it is the same one as this error except without "length" it has "1" or another number I put into it. I also looked through stack overflow and found nothing.

Here is my Code:

var i;
var c = document.getElementsByClassName("app-slot").children;
for (i = 0; i < c.length; i++){
 if (c[i].tagName != "img"){
     c[i].style.display = "none";
 }
}

Can anyone help me tell me what could be wrong with this...my main purpose is to detect if the top element with the class name "app-slot" and see if it has an "img" tag children. I know it works with id's not not any other, I am completely stuck on this. This is different than the duplicated one that has been marked because it uses the children property and just changing it to "querySelectorAll" while keeping the children property does not change a thing, and does not give me an example that I wanted either in one of the answers.

Jonathan J. Pecany
  • 324
  • 1
  • 14
  • 4
    [`getElementsByClassName`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) returns a [collection](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) of elements and there is no `children` property in it – adiga Mar 15 '19 at 17:37
  • Than how can I make it work than...could you please provide a better example please. – Jonathan J. Pecany Mar 15 '19 at 17:52
  • `children` exists on each of the element inside the collection returned by `document.getElementsByClassName("app-slot")`. So nested `for` loop might work depending on what you're trying to do: `for (let element of document.getElementsByClassName("grid")){ for (i = 0; i < element.children.length; i++){ } }` – adiga Mar 15 '19 at 17:59
  • If there is only one element with `app-slot` class in your page, then get the only element from the collection using [0]: `var c = document.getElementsByClassName("app-slot")[0].children;` – adiga Mar 15 '19 at 18:01
  • I have 14 of them and I have 7 that should show as inline if this works, if I did have one than I would totally just use 0. – Jonathan J. Pecany Mar 15 '19 at 18:14
  • Try the nested `for` loop suggested in the previous comment. It's like having an array of objects with each object having a `children` array property. – adiga Mar 15 '19 at 18:16
  • Like what do you mean, I am still quite a noob at this, forgot to mention that but I really need help on this as well, I tried the suggestion but didn't work but don't know if I was doing it right. – Jonathan J. Pecany Mar 16 '19 at 00:31

0 Answers0