loop over elements in div-CodePudding

New to javascript so please be kind.

I am trying to loop over a all the elements in the "wrapper" class to show each element for x amount of time. This code just shows all elements at once.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>Cell One</title>
</head>
<body>
  <div >
    <div  id="inner">
      <p>Test</p>
    </div>
    <div  id="inner">
      <p>Testing</p>
    </div>
  </div>
  <script src="./main.js"></script>
</body>
</html>

Javascript

var divOne = document.getElementsByClassName('x')
console.log(divOne.length)


for (let i=0, len = divOne.length; i < len; i  ) {
  setTimeout(() => {
    divOne[i].style.display = 'none';
  }, 5000)
}

CodePudding user response：

The reason is due to below code

  setTimeout(() => {
    divOne[i].style.display = 'none';
  }, 5000)

Which will make all the element hide after 5000 millseconds,so you need to set them sepeartely

var divOne = document.getElementsByClassName('x')


for (let i=0, len = divOne.length; i < len; i  ) {
  setTimeout(() => {
    for(let j=0;j<len;j  ){
        if(j==i){
            divOne[j].style.display = 'inline-block';
         }else{
            divOne[j].style.display = 'none';
         }
     }
  }, 5000*i)
}

.x{
  display:none;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>Cell One</title>
</head>
<body>
  <div >
    <div  id="inner">
      <p>Test</p>
    </div>
    <div  id="inner">
      <p>Testing</p>
    </div>
  </div>
  <script src="./main.js"></script>
</body>
</html>

CodePudding user response：

The setTimeout waits the 5000ms specified. The reason to hide all elements at the same time is that this code have created all Timeouts with same executing time, making all Timeouts runs at the same time.

The solution is when create the Timeout, pass the ms duration major of the previous, can be done like this:

for (let i=0, len = divOne.length; i < len; i  ) {
  setTimeout(() => {
    divOne[i].style.display = 'none';
  }, 5000 * (i 1))
}

Look at the second parameter of setTimeout, we add the 5000ms multiplicated by index of loop 1 (because the var i starts with 0).

Try code:

var divOne = document.getElementsByClassName('x')
console.log(divOne.length)


for (let i=0, len = divOne.length; i < len; i  ) {
  setTimeout(() => {
    divOne[i].style.display = 'none';
  }, 5000 * (i 1))
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>Cell One</title>
</head>
<body>
  <div >
    <div  id="inner">
      <p>Test</p>
    </div>
    <div  id="inner">
      <p>Testing</p>
    </div>
  </div>
</body>
</html>

CodePudding user response：

To loop over a all the elements in the "wrapper" class to show each element for x amount of time Lets try this code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>Cell One</title>
</head>
<body>
  <div >
    <div  id="inner">
      <p>Test</p>
    </div>
    <div  id="inner">
      <p>Testing</p>
    </div>
  </div>
  <script src="./main.js"></script>
</body>
</html>

here is a JavaScript code which will iterate loop over class name x and hide them with x amount of time one by one

Javascript

    let x = document.querySelectorAll('.x')
  
    for (let i=0; i < x.length; i  )
     {
        setTimeout(() => {x[i].style.display = 'none';},5000*i 1)
     }