获取未捕获的类型错误，但链接工作正常

Question

虽然有一些类似的问题，但我读了它并不能解决我的问题。 希望有人对此有所了解，不仅可以帮助我，也可以帮助其他人。

我已经通过functions.php将JS文件添加到我的子主题（wordpress），然后将事件监听器添加到ID。

问题出在：Uncaught TypeError: Cannot read property 'addEventListener' of null 在 custom.js?ver=5.4:1

虽然当我单击对象时它会正确转到链接，但错误会显示在控制台上。

我在functions.php上添加了：

函数 my_customm_scripts() { wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/custom.js', array('jquery'),'',true); } add_action('wp_enqueue_scripts', 'my_customm_scripts');

并在我的 custom.js 中添加了：

document.getElementById('hercule').addEventListener('click', function() {
    location.href = 'https://somedomain.com'
}, false);

我认为它很简单，但我检查了这么多解决方案但没有成功 谢谢你的时间 J.

 <div class="hoverfora wpb_animate_when_almost_visible wpb_slideInUp slideInUp wpb_column vc_column_container vc_col-sm-4 wpb_start_animation animated" id="hercule">
  <div class="vc_column-inner vc_custom_1587337223984">
    <div class="wpb_wrapper">
      <div class="service_table_holder">
        <ul class="service_table_inner">
          <li class="service_table_title_holder background_color_type" style="">
            <div class="service_table_title_inner">
              <div class="service_table_title_inner2">
                <h3 class="service_title" style="">Web design</h3>
                  <i class="qode_icon_font_awesome fa fa-desktop fa-3x" style="color: #efcd21 !important;"></i>
                </div>
              </div>
            </li>
            <li class="service_table_content" style="">Development de websites .
              <p></p>
            </li>
          </ul>
        </div>
      </div>
    </div>
</div>

Answer 1

我认为是

window.location.href = 'https://somedomain.com'

Answer 2

试试这个，

如果您确定您的 html 源代码包含 id="hercule" 的元素。那你可以试试

window.onload = function () {
    document.getElementById('hercule').addEventListener('click', function() {
        location.href = 'https://somedomain.com'
        // alert("clicked div");
    }, false);
};

确保您所有的加载过程都写在一个地方。否则浏览器将只保留并执行最后找到的 window.onload 函数。

Answer 3

你的这个代码：

document.getElementById('hercule')

正在寻找带有id="hercule" 的DOM 元素。显然，在运行custom.js 时，您的页面不包含这样的元素，因此document.getElementById('hercule') 返回null，然后在对null 对象调用addEventListener 方法时抛出TypeError。

在您的 HTML 页面上查找包含 id="hercule" 的元素。如果找不到，则说明您的问题已确定。

编辑：

后续信息显示 custom.js JavaScript 试图在 id="hercule" 存在之前访问它。解决方法是延迟自定义函数的启动，直到 div 存在。

通常，等待窗口的load 事件就足够了，但在这种情况下尚不清楚是否会起作用，因为“hercule”可能由另一个在@987654328 时尚未完成的JavaScript 函数生成@事件。

一种解决方案就是继续寻找“hercule”直到找到：

// USE THIS SECTION IN YOUR CODE:

// keep looking for "hercule"
function lookForHercule() {
  const hercule = document.getElementById('hercule');
  if (hercule) {
    // add the 'click' listener to 'hercule'
    hercule.addEventListener('click', function() {
      hercule.innerHTML = "You clicked hercule, redirecting to somedomain.com";
      location.href = 'https://somedomain.com'
      }, false);
    return;
  }
  console.log('"hercule" not found');
  setTimeout(lookForHercule, 2000);
}

// start looking
lookForHercule();

// END OF SECTION TO USE IN YOUR CODE

// THE CODE BELOW IS FOR THIS DEMO ONLY, DO NOT USE IN YOUR CODE:

// FOR DEMO ONLY:
// add 'hercule' after 10 seconds to simulate delay
setTimeout(() => {
  const wrapper = document.getElementById('wrapper');
  const hercule = document.createElement('div');
  hercule.id = 'hercule';
  hercule.innerHTML = "I am hercule. Clicking me will redirect to somedomain.com";
  wrapper.appendChild(hercule);
}, 10000);

/* this will change cursor to finger when hovering over hercule */
#hercule:hover {
  cursor: pointer;
}

<div id="wrapper">
  <h4>Search for 'hercule'</h4>
</div>