Soy nuevo en la importación de módulos en ES6. Tengo un módulo simple con una función para crear y agregar un elemento HTML.
Puedo llamar y pasar argumentos a la función, sin embargo, no puedo leer ninguna propiedad del DOM. Recibo errores como este:
Uncaught TypeError: Cannot read properties of null (reading 'parentNode')
He simplificado mi código a continuación:
principal.js
import * as watm_fn from "./modules/functions.js"; document.addEventListener("DOMContentLoaded", function (event) { watm_fn.createToggle("#container"); }funciones.js
export function createToggle(elm) { const toggleElementID = document.getElementById(elm); const languageToggle = document.createElement("select"); toggleElementID.parentNode.replaceChild(languageToggle, toggleElementID); } Recibo un error similar cuando intento devolver el HTML interno de toggleElementID
¿Es posible acceder y manipular el DOM a través de un módulo importado? Y si es así, ¿qué estoy haciendo mal?
(No estoy usando nodo o jquery en este proyecto)
Bueno, me siento tonto. Estoy acostumbrado a codificar en jQuery donde incluyes el "#" delante de tus ID, pero olvidé que getElementById no requiere eso. Eliminar eso de mi argumento pasado resolvió el problema.
Uncaught TypeError: Cannot read properties of null (reading 'parentNode') Este error sugiere que la siguiente línea está fallando toggleElementID es null : toggleElementID.parentNode.replaceChild(languageToggle, elm);
Mira el código buscando el elemento.
const toggleElementID = document.getElementById(elm);Según getElementById Un objeto Element que describe el objeto del elemento DOM que coincide con el ID especificado, o nulo si no se encontró ningún elemento coincidente en el documento.
Por lo tanto, no se encontró ningún elemento coincidente con la identificación de elm proporcionada.