Tengo algunas líneas de código JavaScript que toman textos de encabezados de secciones separadas y los colocan en sus respectivos campos de entrada. También se ejecutan en páginas individuales usando wp_enqueue_script .
Funciona absolutamente bien cuando se usa setTimeout() :
function passengerElevator() { var getProductName = document.querySelectorAll('[data-id="6657316"]'); getProductName.forEach(function(item) { var productName = item.querySelector('.lift'); var inputArea = item.querySelector('input[name=product]'); inputArea.value = productName.innerText; }); var getProductName = document.querySelectorAll('[data-id="e9c06d5"]'); getProductName.forEach(function(item) { var productName = item.querySelector('.lift'); var inputArea = item.querySelector('input[name=product]'); inputArea.value = productName.innerText; }); setTimeout(function() { passengerElevator() },3000); Sin embargo, hay un problema con el tamaño de la página (algunas páginas tienen más de 10 campos de entrada) y no quiero establecer un ms astronómicamente alto para retrasar el script. Así que decidí dispararlo en DOMContentLoaded :
document.addEventListener("DOMContentLoaded", passengerElevator); function passengerElevator() { var getProductName = document.querySelectorAll('[data-id="6657316"]'); getProductName.forEach(function(item) { var productName = item.querySelector('.lift'); // heading text (ex:Panoramic Lift) var inputArea = item.querySelector('input[name=product]'); inputArea.value = productName.innerText; //ouput here }); var getProductName = document.querySelectorAll('[data-id="e9c06d5"]'); getProductName.forEach(function(item) { var productName = item.querySelector('.lift'); // Heading text (ex:Home Lift) var inputArea = item.querySelector('input[name=product]'); inputArea.value = productName.innerText; // Output here }); }Como ya habrás adivinado, no está funcionando. ¿Mi código es demasiado complicado para ejecutarlo más rápido o hay algún otro problema que me falta?
Sé que se han hecho preguntas similares anteriormente, sin embargo, ninguna respuesta existente que encontré pudo ayudarme.
Parece que intenta recorrer elementos que aún no están cargados. Tal vez se agreguen a la página a través de Ajax, por lo que DOMContentLoaded no puede ayudar allí.
Puedes crear tu propia verificación para esos elementos usando setInterval , así que usa algo como esto:
let dataIdCheck = setInterval(() => { if (document.querySelectorAll('[data-id="6657316"]').length > 0 && document.querySelectorAll('[data-id="e9c06d5"]').length > 0) { clearInterval(dataIdCheck); // your code here } }, 500); Este código se ejecutará cada 500 milisegundos y verificará si esos dos elementos existen, usando .length . Una vez que existen, detenemos el intervalo y ejecutamos el código.
También sugiero hacer console.log('in') para verificar que nuestro intervalo deje de ejecutarse una vez que se encuentren los elementos.