Changing element first child is not working with setTimeout

Question

I am working on a project which has a div with certain children. I want to change first element(s) background color by a variable. For example, if I have 32 children div and variable is 20, the function must be change first 20 divs background color.

I used parent.children method by this.

My code is like,

function change() {
    var parent = document.getElementById("clock");
    var child = parent.children;
    var howMany = 5;

    for (var i=0; i < howMany; i++){
        if (child[i].tagName == "DIV") {
            child[i].style.backgroundColor = "red";
        }
    }
}

It works in window.onload but I must use setTimeout() in this function. If I use setTimeout() , I get TypeError: child[i] is undefined error.

So, what is wrong in my function? Is there a other way to do it?

By the way, I'm pretty much new at Javascript and this is my first question on Stack Overflow.

I have a function for `setTimeout` in script. If i need a function with `setTimeout`, I write in `setTimeou`t function. — omerkocaaga, Aug 30 '17 at 20:39
You want to color each div red but there should be a delay between subsequent divs getting their background color changed to red? — Thijs, Aug 30 '17 at 20:54
Nope, it works like controller, the other functions affects on this so i put it on setTimeout function. — omerkocaaga, Aug 30 '17 at 21:02
To be honest I still don't really get what you're trying to achieve. Before I saw your last comment I wrote an answer, reading your last comments makes me think it won't be the answer you're looking for. — Thijs, Aug 30 '17 at 21:18

score 0 · Answer 1 · answered Aug 30 '17 at 20:20

0

From what I can tell your code is ok. I've tested the following HTML/CSS in this Codepen and the function is operating fine: https://codepen.io/anon/pen/gxZwGd?editors=1111

<div id="clock">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

#clock div {
  width: 50px;
  height: 50px;
  background-color: blue;
  display: inline-block;
}

The first 5 <div>s are changing to red, while the others remain blue. And without any console errors.

You may have a made a mistake in your HTML markup. It would be helpful if you added the markup to your question.

answered Aug 30 '17 at 20:20

Mikey

1
1

okay, basicly i have use your structure in my html. But there is bunch of other things. I am making a deadline clock and there is my whole code [link](https://codepen.io/omerkocaaga/pen/zdyKew) – omerkocaaga Aug 30 '17 at 20:36
It shows time and if user add deadline also visualize deadline minutes. I think my code look horrible, by the way. – omerkocaaga Aug 30 '17 at 20:42

Thijs · Accepted Answer · 2017-08-30T21:27:09.470

I am assuming you're looking to change the color of the divs with an interval in between. I'm not a 100% sure it is what you're trying to achieve but I hope it is of help to you.

function changeColor(elements) {
  // Remove the item at index 0 from the array.
  var firstElement = elements.shift();
  // Check if the element is a div element...
  if (firstElement.tagName === 'DIV') {
    // and if it is add a class to change its background color.
    firstElement.classList.add('activated');
  }
  // Check if the array is empty, when it is we don't have to perform any more actions.
  if (elements.length === 0) {
    return;
  }
  
  // Wait a second before calling this method again with the array (which now has 1 less item in it).
  setTimeout(() => {
    changeColor(elements);
  }, 1000);
}

function change() {
    // Get the parent element.
    var parent = document.getElementById("clock"),
        // Get the number of divs to change.
        howMany = 5,
        // Get the children from the parent element, convert it to an array and take as many as needed elements (staring at the first element).
        children = Array.from(parent.children).slice(0, 5);

    // Call the change colors method.
    changeColor(children);
}

change();

#clock {
  display: flex;
}

#clock > div {
  background-color: blue;
  height: 20px;
  width: 20px;
}

#clock > div + div {
  margin-left: 10px;
}

#clock > div.activated {
  background-color: red;
}

<div id="clock">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>  
  <div></div>
  <div></div>
  <div></div>
  <div></div>  
</div>

If I were you I would change how you get the elements to change. Instead of getting them through the parent's children property, get them straight from the DOM like this (provided you can assign a class name to the divs that may have to be changed):

elements = parent.querySelector('.my class name');

It will safe you having the compare the tag name with div, a solution I would try to avoid. It also means that if you select 5 items, you're sure it will be 5 items that need changing.

This solution is more solid than mine. Thanks a lot. But I fixed my problem with diffirent way and keep my logic anyway. If I have some free time, I'll try to change whole logic by this solution. — omerkocaaga, Aug 31 '17 at 07:04

Changing element first child is not working with setTimeout

2 Answers2