En mi sitio web, incluí todos mis códigos JavaScript en un solo archivo common.js. El problema al que me enfrento es que algunos de mis códigos JS son específicos de una página. Así que muestra un error en otra página.
Por ejemplo, tengo un ícono de usuario con id 'icono_usuario' que está presente solo en una página, para esa página, todo funciona bien, pero para otra página, me muestra el error "Error de tipo no detectado: no se pueden leer las propiedades de nulo (leyendo 'addEventListener') en common.js:11". Significa que JS no pudo encontrar ese elemento en otra página. Entonces, ¿cómo puedo solucionar este problema? Cualquier sugerencia es muy apreciada.
Aquí está el código para el icono de usuario
var user_icon = document.getElementById('user-icon'); var menu = document.getElementById('menu'); var x = -100; user_icon.addEventListener('click', function () { if (x == -100) { x = 0 menu.style.right = x; menu.style.opacity = 1; } else { x = -100 menu.style.right = x + '%'; menu.style.opacity = 0; } })Puedes agregar una trampa para esto. Esto debería eliminar el error TypeError no detectado.
var user_icon = document.getElementById('user-icon'); var menu = document.getElementById('menu'); var x = -100; if(user_icon && menu) { user_icon.addEventListener('click', function () { if (x == -100) { x = 0 menu.style.right = x; menu.style.opacity = 1; } else { x = -100 menu.style.right = x + '%'; menu.style.opacity = 0; } }) }Cuando elimina el contenido DOM que tiene un evento vinculado, DEBE eliminar esos eventos antes de eliminar el contenido.
Puede hacerlo activando un bindEvent y unbindEvents :
window.onload = bindEvents var menu = document.getElementById('menu'); var x = -100; function bindEvents() { var user_icon = document.getElementById('user-icon'); user_icon.addEventListener('click', myAction, true); } function unbindEvents() { var user_icon = document.getElementById('user-icon'); user_icon.removeEventListener('click', myAction, true); } function myAction() { if (x == -100) { x = 0 menu.style.right = x; menu.style.opacity = 1; } else { x = -100 menu.style.right = x + '%'; menu.style.opacity = 0; } } Puede llamar a bindEvents y unbindEvents en el momento apropiado, pero tenga en cuenta que su elemento debe estar en el DOM cuando se llamen. De lo contrario, dejará algunos eventos zombis en su página y eso es una pérdida de memoria grave, especialmente cuando se crea una aplicación de una sola página.