Estoy tratando de llamar a una función de cambio en un elemento de selección de formulario, actualmente trabajando con jQuery, pero quiero cambiar a Vanilla JS. Estoy usando el método más cercano en el elemento secundario para obtener el elemento principal, así;
var $currencyForm = $('.shopify-currency-form select').parents('form');Y tenga este JS para replicar la falta de la función más cercana, pero siga recibiendo errores de consola por los que se devuelve un valor nulo al leer 'parentNode'. Vea abajo;
//currencyForm is our parent selector const currencySelect = document.querySelector('.shopify-currency-form select'); const currencyForm = document.querySelector('form'); //partams are select(child) and form(parent) function getParentEl(el, parentSelector) { if (parentSelector === undefined) { parentSelector = document; } var parents = []; var p = el.parentNode; while (p !== parentSelector) { var o = p; parents.push(o); p = o.parentNode; } parents.push(parentSelector); return parents; } const formInit = getParentEl(currencySelect, currencyForm); //The parent node should be the last element const selectEl = parents[parents.length-1]; console.log(selectEl);Gracias
Creo que se está volviendo null porque su selector principal, .shopify-currency-form select , se refiere a un elemento que no existe o que no está accesible en el momento en que lo busca. En lugar de buscar undefined aquí...
if (parentSelector === undefined) {comprobar nulo...
if (parentSelector === null) { y luego se ejecutará este bloque, asignando otro elemento como el valor de parentSelector si eso es lo que le gustaría que sucediera.
También debe mover la declaración inicial de su parents principal fuera del alcance local en su función para acceder a ella para la verificación que realiza al final.
Aquí hay un violín con algunos cambios y un caso de prueba para un nombre de clase válido pasado para el padre el y uno inventado para que quizás pueda ver lo que está sucediendo un poco mejor. Suponiendo que se asigna un nombre de clase padre válido y el padre está disponible, esto se ejecuta sin errores:
https://jsfiddle.net/abgregs/3L7mzory/2/
HTML
<!-- <body> --> <div class="parent"> <div class="first-child"> <div class="my-target-element"> </div> </div> </div> <!-- <body> -->JS
const currencySelect = document.querySelector('.my-target-element'); // I think that selector is giving you null, but then you're checking for undefined... // I gave it a made up class here to replicate... const currencyForm = document.querySelector('.made-up-selector'); // try uncommenting this and comment out the line above, it will work too but there will be fewer els in our parents array... /* const currencyForm = document.querySelector('.parent'); */ // moved out of local scope... var parents = []; function getParentEl(el, parentSelector) { // changed from checking undefined to checking null here... if (parentSelector === null) { parentSelector = document.documentElement; } // move this outside of local scope... /* var parents = []; */ console.log('parentSelector: ', parentSelector); var p = el.parentNode; while (p !== parentSelector) { var o = p; parents.push(o); p = o.parentNode; } console.log(parents.length) parents.push(parentSelector); return parents; }; const formInit = getParentEl(currencySelect, currencyForm); //The parent node should be the last element const selectEl = parents[parents.length-1]; console.log(selectEl);