How to start a function in chrome console when a text element in the html code appear?

Question

I've tried to write a script that fire a click on a specific element of an online website (not my website) and at a specific time. The specific time is given by a countdown that run inside the website.

by reading the html file of that website, the code (captured at a generic time) is like that:

<div class="thecountdowndown" id="counting"><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><div>00</div><small>days</small></div><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><div>23</div><small>hours</small></div><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><div>12</div><small>minutes</small></div><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><div>41</div><small>seconds</small></div></div>

image of the code of the counter. So it's basically shown a timer, and every second the html code change.

My problem is that i can't figure it out how to write a functions that check when the code up here appear in the html! This one is not working:

function searchTree(element, matchingTitle){
     if(element.title == matchingTitle){
          return element;
     }else if (element.children != null){
          var i;
          var result = null;
          for(i=0; result == null && i < element.children.length; i++){
               result = searchTree(element.children[i], matchingTitle);
          }
          return result;
     }
     return null;
}

I may should use var and a "While" loop: while the var has value 0, the function continues to search. but i don't know how to write the "searching" function.

And to say it all, i can't think about a way to start the "click" function after that the "searching" function has detected that the code is appeared.

Can anyone help me?

Update: in other words, there is a countdown on that website that start at midnight. Now, how i can (by using the chrome console) click a button when the countdown show the time "05:45:00"? The button that i want to press is in the same page of the countdown.

Answer 1

// just for simulating change in counter on HTML - already on website / dont inject through dev-tools
var seconds = 45;
setInterval(() => {
  document.getElementById("fakeChange").innerHTML = seconds--;
}, 1000);

// is injected through dev-tools / console by yourself
var elIdToObserve = 'counting';
var elIdToSimulateClick = 'submit';
// get the following value by manually calling: 
// console.log(document.getElementById(elIdToObserve).innerHTML)
var waitForContentAppearing = `
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><div>00</div><small>days</small></div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><div>23</div><small>hours</small></div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><div>12</div><small>minutes</small></div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><div id="fakeChange">41</div><small>seconds</small></div>
`; // change this to your target content i.e. seconds 46 to 41

setInterval(() => {
  if(document.getElementById(elIdToObserve).innerHTML === waitForContentAppearing) {
    // Add you own instructions here that should be executed

    // Since you mentioned there is a button within the webpage I added a button with id that gets a automated click - the button I added does do something i.e. for visualization I made the button show some text indicating it has been "clicked".
    document.getElementById(elIdToSimulateClick).click();
  }
}, 500);

<!-- comes from existing website -->
<div class="thecountdowndown" id="counting">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><div>00</div><small>days</small></div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><div>23</div><small>hours</small></div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><div>12</div><small>minutes</small></div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><div id="fakeChange">46</div><small>seconds</small></div>
</div>
<button id="submit" onclick="document.getElementById('simulationClick').innerHTML = 'Simulated click at timestamp '+Date.now()">Send</button>
<div id="simulationClick">
</div>

You might as well need to select via classes to get the Button you want to click on.