Блог

У меня есть несколько строк кода JavaScript, которые собирают тексты заголовков из отдельных разделов и помещают их в соответствующие поля ввода. Они также выполняются на отдельных страницах с использованием wp_enqueue_script .

Он работает абсолютно нормально, когда 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);  

Однако существует проблема с размером страницы (некоторые страницы имеют более 10 полей ввода), и я не хочу устанавливать астрономически высокое ms значение для задержки сценария. Поэтому я решил выстрелить из него 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  }); }  

Как вы, возможно, уже догадались, это не работает. Является ли мой код слишком грязным, чтобы его можно было выполнить быстрее, или есть какая-то другая проблема, которую я упускаю?

_{Я знаю, что подобные вопросы задавались ранее, однако ни один из существующих ответов, которые я нашел, не смог мне помочь.}

Похоже, вы пытаетесь перебирать элементы, которые все еще не загружены. Возможно, они добавляются на страницу через Ajax, так DOMContentLoaded что тут ничего не поделаешь.

Вы можете создать свою собственную проверку для этих элементов с помощью setInterval , поэтому используйте что-то вроде этого:

 let dataIdCheck = setInterval(() =gt; {  if (document.querySelectorAll('[data-id="6657316"]').length gt; 0 amp;amp; document.querySelectorAll('[data-id="e9c06d5"]').length gt; 0) {  clearInterval(dataIdCheck);   // your code here  } }, 500);  

Этот код будет выполняться каждые 500 миллисекунд и проверять, существуют ли эти два элемента, используя .length . Как только они появятся, мы остановим интервал и запустим код.

Я также предлагаю сделать console.log('in') это, чтобы проверить, что наш интервал остановится, как только элементы будут найдены.