wait for a element to exist on page, then fire click function (pure JS)

Question

Not in jQuery, vanilla JS.

I have the below code I'm using that works fine within the console; the problem is the 'goCheck' element does not appear right away at default, after the user crawls through a few sections, then it appears visible; because of this the event listener is hitting null immediately.

How could I get this to execute WHEN my 'goCheck' element becomes visible on page?

    var goCheck = document.getElementById('input_52_65_chosen');
    goCheck.addEventListener('click', function (event) {

    var value1 = document.getElementById('input_52_22').value;
    var value2 = document.getElementById('input_52_100').value;
    var value3 = document.getElementById('input_52_95').value;
    // var value4 = document.getElementById('input_52_96').value;

    if (value1 > 0 ) { 
         document.getElementById('rate').style.display = "none";
         document.getElementById('pay-plans').style.display = "none";
         document.getElementById('field_52_116').style.display = "none";

      } else if (value1 === 0 ) { 
        document.getElementById('field_52_116').style.display = "block";
    }
    if (value2 > 0 ) { 
         document.getElementById('rate').style.display = "none";
         document.getElementById('pay-plans').style.display = "none";
         document.getElementById('field_52_116').style.display = "none";

    } else if (value2 === 0 ) { 
        document.getElementById('field_52_116').style.display = "block";
    }
    if (value3 > 0 ) { 
         document.getElementById('rate').style.display = "none";
         document.getElementById('pay-plans').style.display = "none";
         document.getElementById('field_52_116').style.display = "none";

      } else if (value3 === 0 ) { 
        document.getElementById('field_52_116').style.display = "block";
    }
    if (value1 && value2 && value3 == 0 ) { 
        document.getElementById('field_52_116').style.display = "block";
    }   
  }
);

Is the `goCheck` element already in the HTML and is just hidden and shows after the user has crawled trough few sections as you say, OR, is the element it self **created** after the user has crawled a few sections ? — Petar, Oct 26 '18 at 23:30

score 3 · Accepted Answer · answered Oct 26 '18 at 22:51

3

Listen to every click everywhere, then check if the element you are looking for was clicked:

document.body.addEventListener("click", function(event){
  const goCheck = document.getElementById('input_52_65_chosen');
  let el = event.target;
  while(el && el !== goCheck) el = el.parentElement;
  if(!el) return;
  //...
});

answered Oct 26 '18 at 22:51

Jonas Wilms

132,000
20
149
151

3

aka event delegation. – Zze Oct 26 '18 at 22:55

wait for a element to exist on page, then fire click function (pure JS)

1 Answers1