Access DOM elements from within setTimeout

Question

I am javascript/jquery noobie. Trying to hack together something for personal project How to access elements using jquery from within setTimeout. I am trying to click a button after three seconds and I tried the following Eg

setTimeout((){$("#id1").click()}, 3000) However I am not able to access any element from within the setTimeout. I have to hold reference to the element outside and then click.

var ele = $("#id1");
setTimeout((){ele.click()}, 3000)

How can I acces elements from within a setTimeout or setInterval

EDIT: I do not have access to all the div elemets and cannot store in a variable or attach it to a timeout I have to click a button after 3 seconds. Another button will be available after I click this. The second button is not hidden but simple not available. So I need something like this

$("#id1").click();
    setTimeout((){
    $("#id2").click();
    }, 3000);
}, 3000)

score 0 · Answer 1 · answered Sep 27 '19 at 04:59

you could use .bind(null,somethinWithDom) in the callbackFunction and now the function has a new parameter (somethingWithDomBinded) => {}

But for practical uses you need to use Event listeners, instead passing you domThing you could trigger an event in the callback then listen and trigger whatever you want

sayalok · Answer 2 · 2019-09-27T06:05:12.213

0

First you have syntax error in you code

ur Html

<button id="id1">Click</button>

ur jQuery

setTimeout(() => {
    var ele = $("#id1");
    ele.click(() => {
      console.log(ele.html())
    })
  }, 3000);

Inside click You have to call another func and you can put your logic there

edited Sep 27 '19 at 06:05

answered Sep 27 '19 at 05:00

sayalok

882
3
15
30

$("#id1") is undefined when I try it from within the setTimout – user009122 Sep 27 '19 at 17:16
Did u try my code isn't it working? Because the $("#id1") inside the setTimeout () function and it's working perfectly – sayalok Sep 27 '19 at 17:24
I have the button available only after 3 seconds. var ele = $("#id1"); executes first – user009122 Sep 28 '19 at 17:34

score 0 · Answer 3 · answered Sep 27 '19 at 05:02

You are simply missing the Arrow operator =>. Check this out:

$(document).ready(function(){
  setTimeout(() =>{
   console.log($("#id1"));
 }, 3000);
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<button id="id1">Click me</button>

Or you can just access it like this:

setTimeout(() => console.log($("#id1")), 3000);

score 0 · Accepted Answer · answered Sep 29 '19 at 19:55

0

I used this mentioned in the stackoverflow answer to satisfy my use case

answered Sep 29 '19 at 19:55

user009122

125
2
9

Access DOM elements from within setTimeout

4 Answers4