Получение Uncaught TypeError, но ссылка работает нормально

Question

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

Я добавил файл JS в свою дочернюю тему (wordpress) с помощью функций. php, а затем добавил прослушиватель событий. в ID.

Проблема обитает в: Uncaught TypeError: Невозможно прочитать свойство 'addEventListener' из null в custom. js? ver = 5.4: 1

Хотя, когда я щелкаю объект ссылка идет правильно, ошибка отображается на консоли.

для функций. php добавлено:

function my_customm_scripts () {wp_enqueue_script ('custom- js', get_stylesheet_directory_uri (). '/custom.js', массив ('jquery'), '', true); } add_action ('wp_enqueue_scripts', 'my_customm_scripts');

и по моему усмотрению. 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')

ищет элемент DOM с id="hercule". Очевидно, ваша страница не содержит такого элемента во время выполнения custom.js, поэтому document.getElementById('hercule') возвращает ноль, а затем выдается ошибка TypeError при вызове метода addEventListener для нулевого объекта.

Найдите на своей странице HTML элемент, содержащий id="hercule". Если вы не можете найти его, ваша проблема была идентифицирована.

Редактировать:

Последующая информация показывает, что пользовательский код. js JavaScript пытается получить доступ к div с id = "hercule", прежде чем он существует. Решение состоит в том, чтобы отложить запуск пользовательской функции до появления div.

Обычно достаточно ожидания события load окна, но в данном случае неясно, что будет работать как "геркулес". может генерироваться другой JavaScript функцией, которая не завершится к моменту события load.

Одно из решений - просто продолжать искать «геркулеса», пока не будет найдено:

// 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>