Javascipt works when setTimeout() is used but it isn't working when document.eventListener(&#03-CodePudding

TO TYRANNICAL MODERATORS & BULLIES: I know similar questions have been asked previously, however since it is a Q&A website, I dare to ask it again because mine isn't working.

TO REAL CONTRIBUTORS: I have a few lines of JS code that pick up heading texts from separate sections and place them into their respective input fields. They are also executed on single pages using wp_enqueue_script. Here is the thing: it works absolutely fine when setTimeout() is used:

function passengerElevator() {
  var getProductName = document.querySelectorAll('[data-id="6657316"]');
    getProductName.forEach(function(item) {
      var productName = item.querySelector('.lift');
      var inputArea = item.querySelector('input[name=product]');
      inputArea.value = productName.innerText;
  });
  var getProductName = document.querySelectorAll('[data-id="e9c06d5"]');
    getProductName.forEach(function(item) {
      var productName = item.querySelector('.lift');
      var inputArea = item.querySelector('input[name=product]');
      inputArea.value = productName.innerText;
  });
setTimeout(function() { passengerElevator() },3000);

However, there is problem of page size (some pages have more than 10 input fields) and I don't wanna set astronomically high ms to delay the script. So I decided to fire it on DOMContentLoaded

document.addEventListener("DOMContentLoaded", passengerElevator);
function passengerElevator() {
  var getProductName = document.querySelectorAll('[data-id="6657316"]');
    getProductName.forEach(function(item) {
      var productName = item.querySelector('.lift'); // heading text (ex:Panoramic Lift)
      var inputArea = item.querySelector('input[name=product]');
      inputArea.value = productName.innerText; //ouput here
  });
  var getProductName = document.querySelectorAll('[data-id="e9c06d5"]');
    getProductName.forEach(function(item) {
      var productName = item.querySelector('.lift'); // heading text (ex:Home Lift)
      var inputArea = item.querySelector('input[name=product]'); 
      inputArea.value = productName.innerText; //ouput here
  });
}

As you may have already guessed, it is not working. Is my code too messy to be executed faster or is there any other problem I am missing?

CodePudding user response：

Seems like you try to loop element that are still not loaded, perhaps they are being appended to the page via ajax so DOMContentLoaded can't help there.

You can create your own check for those elements using setInterval, so something like this.

let dataIdCheck = setInterval(() => {
    if (document.querySelectorAll('[data-id="6657316"]').length > 0 && document.querySelectorAll('[data-id="e9c06d5"]').length > 0) {
        clearInterval(dataIdCheck);
        
        // your code here
    }
}, 500);

This code will run every 500 miliseconds and check if those two elements exists, using .length, once they do exists we stop the interval and run the code.

I also suggest to do console.log('in') to check that our interval stop runing once the elements are found.