1

Hola tengo una duda que no logro resolver sucede que eh creado una pequeña aplicacion web donde tengo divido el header y footer. En el footer cargo todos los scripts. Entonces el problema es que para la pagina 1 eh creado este codigo javascript:

const btnRecovery = document.getElementById('btnRecovery');
const inputRecovery = document.getElementById('input-recovery--pass');
btnRecovery.disabled = true;
function activateBtn(value) {
    if (inputRecovery.value.length >=4) {
        btnRecovery.disabled = false;
        btnRecovery.classList.remove('disabled');
    }else{
        btnRecovery.disabled = true;
    }
}

no hace mas que desactivar un boton hasta que se llene el input estos ya tienen un id especificado. El problema es que al estar en la pagina 2 me muestra el siguiente error en consola: Uncaught TypeError: Cannot set properties of null (setting 'disabled') revisando el error hace referencia al codigo javascript que use para la pagina 1. Pero como mencione todo el codigo javascript lo coloco en el footer.php por lo que en todas las paginas se cargan el mismo codigo y por lo tanto muestra el mismo problema. ¿Entonces como podría hacer para evitar estos avisos en consola?. Realmente no entiendo como solucionar esto.

6
  • Pues depende de las páginas (cuya estructura desconocemos) porque si ese getElementById no encuentra nada con ese ID, va a ser nulo y te va a dar ese error
    – Alfabravo
    el 2 ago. 2022 a las 20:09
  • Hola gracias por responder, bueno ese getElementById del ejemplo solo lo utilizo en una pagina. Pero entonces en lugar de usar el footer.php para colocar el codigo js y que replique a todas las paginas, debería solo colocarlo directo en la pagina que se necesita? el 2 ago. 2022 a las 20:12
  • Podrías pensar en recursos JS que se cargan en todas las páginas y otros que sólo son propios de una página específica y no tiene sentido cargar en todas.
    – Alfabravo
    el 2 ago. 2022 a las 20:26
  • a ver como te lo explico; si estas usando una infraestructura SPA (Single Page Application), basta con que cargues solo una vez los javascript; pero tus javascript deben trabajar con delegados; si tu refrescas la pagina web para ir de una a otra entonces cada vez que lo hagas tienes que cargar todos los javascript que tengan que ver con la interface de usuario (botones, anchors, tablas, imagenes, inputs, etc). y todo esto no tiene nada que ver con php no se por que le pusiste esa etiqueta.
    – user46896
    el 2 ago. 2022 a las 20:28
  • ahora desconocemos tu html inicial y final asique poco podemos ayudarte en ese sentido; pero lo que si esta claro es que al ejecutarce tu javascript no esta encontando ese elemento con ese ID y por eso btnRecovery es null; entonces lo que te dice la consola es que a una variable con valor null no se le puede aplicar la propiedad: setting 'disabled'
    – user46896
    el 2 ago. 2022 a las 20:31

1 respuesta 1

0

Realmente, es algo muy sencillo de resolver, basta con agregar un condicional:

const btnRecovery = document.getElementById('btnRecovery');
const inputRecovery = document.getElementById('input-recovery--pass');
if(btnRecovery && inputRecovery) {
    // Solo si el botón y el campo existen (no tienen valor nulo)
    btnRecovery.disabled = true;
    function activateBtn(value) {
        if (inputRecovery.value.length >=4) {
            btnRecovery.disabled = false;
            btnRecovery.classList.remove('disabled');
        }else{
            btnRecovery.disabled = true;
        }
    }

    // Si haces algo más con el botón o el campo
    // Todo el código relacionado debe estar en este bloque
}

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.