Console error in google "Uncaught TypeError: Cannot read property 'style' of null"

Question

I have put the option to add the PWA app from various buttons on my website, but the google console gives me the error "Uncaught TypeError: Cannot read property 'style' of null".

My intention is that the PWA app can be installed from the menu, the header and at the end in the footer. The buttons work, but the error in the console persists ...

I pass the code I have in footer.php:

    <script type="text/javascript">
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', function() {
                navigator.serviceWorker.register('/sw.js')
                    .then(function(registration) {
                        console.log('service worker ready');
                        registration.update();
                    })
                    .catch(function(error) {
                        console.log('Registration failed with ' + error);
                    });
            });
        }


        let deferredPrompt;
        const addBtnHeader = document.querySelector('.add-button-header');
        const addBtnMenu = document.querySelector('.add-button-menu');
        const addBtnFooter = document.querySelector('.add-button-footer');

        addBtnHeader.style.display = 'none';
        addBtnMenu.style.display = 'none';
        addBtnFooter.style.display = 'none';

        window.addEventListener('beforeinstallprompt', (e) => {
            // Prevent the mini-infobar from appearing on mobile. Evita que Chrome 67 y versiones anteriores muestren automáticamente el aviso
            e.preventDefault();
            // Guarda el evento para que pueda activarse más tarde
            deferredPrompt = e;
            // Actualizar la interfaz de usuario para notificar al usuario que puede agregar a la pantalla de inicio
            addBtnHeader.style.display = 'block';
            addBtnMenu.style.display = 'block';
            addBtnFooter.style.display = 'block';

            addBtnHeader.addEventListener('click', (e) => {
                // Oculta nuestra interfaz de usuario que muestra nuestro botón A2HS
                addBtnHeader.style.display = 'none';
                // Mostrar el aviso
                deferredPrompt.prompt();
                // Espere a que el usuario responda a la pregunta
                deferredPrompt.userChoice.then((choiceResult) => {
                    if (choiceResult.outcome === 'accepted') {
                        console.log('User accepted the A2HS prompt');
                    } else {
                        console.log('User dismissed the A2HS prompt');
                    }
                    deferredPrompt = null;
                });
            });


            addBtnMenu.addEventListener('click', (e) => {
                // Oculta nuestra interfaz de usuario que muestra nuestro botón A2HS
                addBtnMenu.style.display = 'none';
                // Mostrar el aviso
                deferredPrompt.prompt();
                // Espere a que el usuario responda a la pregunta
                deferredPrompt.userChoice.then((choiceResult) => {
                    if (choiceResult.outcome === 'accepted') {
                        console.log('User accepted the A2HS prompt');
                    } else {
                        console.log('User dismissed the A2HS prompt');
                    }
                    deferredPrompt = null;
                });
            });


            addBtnFooter.addEventListener('click', (e) => {
                // Oculta nuestra interfaz de usuario que muestra nuestro botón A2HS
                addBtnFooter.style.display = 'none';
                // Mostrar el aviso
                deferredPrompt.prompt();
                // Espere a que el usuario responda a la pregunta
                deferredPrompt.userChoice.then((choiceResult) => {
                    if (choiceResult.outcome === 'accepted') {
                        console.log('User accepted the A2HS prompt');
                    } else {
                        console.log('User dismissed the A2HS prompt');
                    }
                    deferredPrompt = null;
                });
            });


        });
    </script>

The code of a button, the rest are similar, changing the content of class:

<a style="position: fixed;bottom:117px;left: 10px;z-index:9999;" class="add-button-footer mobile-menu añadirapp" title="pulsar para añadir a tus aplicaciones" href="#" onclick="javascript:return alert('<?php echo osc_esc_js(__('LEALES.ORG EN TUS APLICACIONES<br><br>•&nbsp;Pulsando Añadir en el siguiente mensaje se añadirá a tus aplicaciones, para que accedas cómodamente.<br><br>•&nbsp;Si no se muestra el mensaje, actualiza e inténtalo nuevamente.', 'beta')); ?>')">
            <i class="fas fa-mobile-alt" href="#" style="margin-top:8px;margin-right:13px;font-size:34px;color:#F56200;"></i>
        </a>

Thanks in advance!

This tells me to add more details, but there is not much more to add ... This tells me to add more details, but there is not much more to add ... This tells me to add more details, but there is not much more to add add ... This tells me to add more details, but not much more to add ...

Answer 1

It has been solved, the error is that the button with class = "add-button-footer" was only shown when it detected a mobile phone and when looking for it in the computer version it did not appear.