setTimeout access element which is not available yet

Question

I am trying to put together a hacky script to click some buttons on a website

I have a setTimeout function to click a button after sometime. After the button is clicked I have more DOM elements available which I have to click again. At no point does the whole page reload.

I tried the following

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

id2 is not available initially and is available only after id1 is clicked. The above script therefore cannot click button 2, since it was not able to access it. How can I make my above condition work.

@charlietfl I did write up the code which I used. Also I am not trying to create any buttons. I am trying to click two buttons after timeouts (which is what I am trying to do in the code) — user009122, Sep 29 '19 at 01:26
Am going off of you saying after the first click you have other elements available. Not clear what that means. Show us the html involved so we can run this code to see your problem — charlietfl, Sep 29 '19 at 01:36
I'm guessing that clicking `#id1` loads `#id2` onto the DOM after doing some activity. Perhaps you should give it some time to perform that activity? Increase the inner `setTimeout` to 5000 and see if it works. — asleepysamurai, Sep 29 '19 at 20:04

score 0 · Answer 1 · answered Sep 28 '19 at 21:59

I have coded something like this.Create new button element manually and set a create function to onclick attribute. Hope it helps!

var counter = 1;
var ul = document.getElementById("list");

var btn1 = document.getElementById("id1");
// We've started to clicking 3 sec later!!
setTimeout(function(){
  btn1.onclick = createNewButton;
  btn1.click();
  btn1.setAttribute("disabled",true);
},3000);
// This func create new button elements
// on each button click!!
function createNewButton(){
  if(counter < 5) {
    counter++;
    var li = document.createElement("li");
    var button = document.createElement("button");
    button.setAttribute("id","id"+counter);
    //button.onclick = createNewButton;
    button.innerHTML = counter+".Button";
    li.appendChild(button);
    li.setAttribute("id","element"+counter);
    ul.appendChild(li);
    // Trigger next click event!!
    setTimeout(function(){
      button.onclick = createNewButton;
      button.click();
      button.setAttribute("disabled",true);
    }, 3000);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ul id="list">
    <li id="element1">
      <button id="id1">1.Button</button>
    </li>
  </ul>
</div>

Thanks for the answer. I am not trying to create any buttons. I am trying to create a script to click a bunch of buttons. A button with "#id1" exists. Once I click that, another button with id2 shows up and I want to click that. This is my use case. I also do not want to click these buttons immediately. I want to click "#id2" 20 seconds after it shows up — user009122, Sep 29 '19 at 01:23
Okey. Just put your html file in the question. So i can make a script to achieve it. Ineed your html file to use in stackoverflow snippet app.Also, your "#id2,#id3,#id4..." buttons are disabled or hidden? All buttons has same id sequence? id1 id2 id3..? The next button will show up with every "manual" click or with a timer(setTimeout)? Button's click event will show "only" next button? Please clarify these points. — erginduran, Sep 29 '19 at 06:27

setTimeout access element which is not available yet

1 Answers1