JavaScript 在使用 setTimeout() 时有效，但在 WordPress 页面上使用 document.eventListener('DOMContentLoaded', x) 时无效。为什么？

Question

我有几行 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
  });
}

正如您可能已经猜到的那样，它不起作用。是我的代码太乱而无法更快地执行，还是我遗漏了任何其他问题？

_{我知道以前有人问过类似的问题，但是，我找到的现有答案都无法帮助我。}

Answer 1

您似乎试图遍历仍未加载的元素。也许它们是通过 Ajax 附加到页面的，所以 DOMContentLoaded 对此无能为力。

您可以使用 setInterval 为这些元素创建自己的检查，因此请使用如下内容：

let dataIdCheck = setInterval(() => {
    if (document.querySelectorAll('[data-id="6657316"]').length > 0 && document.querySelectorAll('[data-id="e9c06d5"]').length > 0) {
        clearInterval(dataIdCheck);

        // your code here
    }
}, 500);

此代码将每 500 毫秒运行并使用 .length 检查这两个元素是否存在。一旦它们确实存在，我们就会停止间隔和运行代码。

我还建议做 console.log('in') 检查我们的间隔是否在找到元素后停止运行ning。

JavaScript 在使用 setTimeout() 时有效，但在 WordPress 页面上使用 document.eventListener('DOMContentLoaded', x) 时无效。为什么？

JavaScript works when setTimeout() is used, but it isn't working when document.eventListener('DOMContentLoaded', x) is used on a WordPress page. Why?

javascript

wordpress

event-handling

addeventlistener

settimeout