Javascript assign a class that doesn't exist to a variable

Question

After clicking in this button:

var option_btn = document.querySelectorAll('[class*="sp_choice_type"]')[1]

the following button will be available in the web:

var refuse = document.querySelector('[class*="priv-reject-btn"]')[0]

but as is not available before clicking there, with the following piece of code won't work:

var option_btn = document.querySelectorAll('[class*="sp_choice_type"]')[1]
option_btn.addEventListener('click', ()=>{
    setTimeout(()=>{
        var refuse = document.querySelector('[class*="priv-reject-btn"]')[0];
        refuse.addEventListener('click',() =>{
            console.log("Eureka")
    })
    }, 5000)
})

I've also tried with some Promises, but didn't work either.

The case is in the site zonebourse.com with the button Option from the botton disclaimer and "Tout refuser" that is triggered just after clicking the Option

Answer 1

Without seeing a working example of the problem you are facing it's hard to say for sure what the issue is. It seems that you are attempting to add a new button (Button B) to the page when the user clicks another button (Button A) and take an action when Button B is pressed. With that in mind here is an example of adding a button to the page and taking an action when that new button is clicked. The code is commented but let me know if you have any questions or if anything isn't clear and I'll improve my answer.

 // find all option buttons var options = document.querySelectorAll('.option'); // loop over all option buttons [...options].forEach((opt) => { // wire event handler for click opt.addEventListener('click', (e) => { // check if we have already added the button if (!e.target.actionButton) { // return a promise instead of setTimeout for better async return new Promise((resolve, reject) => { // create the new button var btn = document.createElement("button"); // pull out the option attribute to make it easier to reference later var optionAttr = e.target.getAttribute('data-option') // store the option for this button btn.setAttribute('data-option', optionAttr); // wire the click handler for this button btn.addEventListener('click', (ev) => { // get the option var option = ev.target.getAttribute('data-option'); // just log for now console.log(`you clicked ${option}`) }); // set the text of the button btn.innerHTML = `Action Button ${optionAttr}`; // store a reference to the action button on the option button e.target.actionButton = btn; // append the new action button to the action button container document.querySelector('#buttons').append(btn); // resolve the promise resolve(); }); } }) });

 button { display: inline-block; margin: .5em; padding: .5em; } #buttons button { display: inline; margin: .5em; padding: .5em; }

 <button class="option" data-option="1"> Option 1 </button> <button class="option" data-option="2"> Option 2 </button> <div id="buttons"> </div>