Problem using while loop

Question

I have a input on a page where I type the ZIP code and can calculate the estimated value and time of delivery of a product for each region.

By clicking the calculate button it will show a box loaded via Ajax with the respective information, the problem is that the platform has a small problem (bug) and shows 8 working days even for products that should be 4 working days.
My goal is to make a check for if the product has a price higher than $ 149,90 it performs a function to change the text from 8 working days to 4 working days.

The problem is that this element is not loaded right after clicking the button, it only appears when the Ajax request is completed (and I do not have access to the scripts that make this request).

Then I face problems like the connection speed of the user (which is variable from one to another), and the elements do not exist right after I click the button.

I tried to use the while loop, but I’m in trouble, see the code:

window.addEventListener('DOMContentLoaded', function(){

if( document.querySelector('button[type="submit"]').textContent === 'OK' ){

    document.querySelector('button[type="submit"]').addEventListener('click', function(){

        var preco = /(\d+)(\,)(\d+)/.exec( document.getElementsByClassName('preco-promocional')[1].textContent );

        if( preco[1] > 149 ){
            while( typeof( document.getElementsByClassName('prazo')[1] ) === 'undefined' ){
                while( document.getElementsByClassName('prazo')[1].textContent === '8 dias úteis' ){
                    document.getElementsByClassName('prazo')[1].textContent = '4 dias úteis';
                }
            }
        }
    });
}

});

The logic would be to check while this element is undefined, and then, when it ceases to be, I run another loop check if the text is 8 dias úteis and while it is, it tries to change to 4 dias úteis.

Grateful for the attention

Answer 1

This will crash many browsers... having a while running that way will stop the browser. In cases where something is even necessary solution is a setInterval.

What you can do is hide the parent element of that final element, and show again only when you have changed the value.

And by the way test typeof preco[1] to see if it gives number. If not your if won’t work right.

Code suggestion:

window.addEventListener('DOMContentLoaded', function () {
    var botaoSubmit = document.querySelector('button[type="submit"]');
    if (botaoSubmit.textContent === 'OK') {
        botaoSubmit.addEventListener('click', function () {
            var preco = /(\d+)(\,)(\d+)/.exec(document.getElementsByClassName('preco-promocional')[1].textContent);
            if (preco[1] > 149) {
                var prazo = document.getElementsByClassName('prazo')[1];
                var espera = setInterval(function(){
                    if (!prazo) return;
                    prazo.textContent = '4 dias úteis';
                    clearInterval(espera);
                }, 100);
            }
        });
    }
});