Скрипт отлично работает в консоли браузера, но не в сети

Question

Я работаю с веб-сайтом Wordpress, где я создаю навигационную панель. Одна из функций, которые я хотел бы добавить, - это где, если вы находитесь на определенной странице, опция на панели навигации будет выделена жирным шрифтом, чтобы представлять, что это раздел сайта, который вы посещаете.

Я пытаюсь добиться этого с помощью JavaScript, так как у меня нет знания PHP:

var current_page = document.URL; 
var current_option_id=""; 
if(current_page==="some-url"){ 
    current_option_id="menu-item-34"; 
} 
document.getElementById(current_option_id).getElementsByTagName("A")[0].style.fontWeight="bold"; 

В принципе, мой код выясняет, какие страницы мы на, и назначит правильное меню опциона id до переменной current_option. Затем скрипт попытается выбрать нужный пункт меню , выбрать ссылку внутри этого пункта меню и изменить его стиль.

Проблема с этим скриптом заключается в том, что он просто не работает, генерируя ошибку, когда он не может выбрать элемент HTML; document.getElementById(current_option); возврат null. Однако, когда я делаю это в консоли, он отлично работает, и стиль изменяется правильно. Почему это? Я знаю, что переменная current_option имеет правильное значение, но сценарий терпит неудачу, когда он пытается выбрать элемент для изменения.

Любые предложения и помощь с благодарностью. Если вы знаете, как сделать это на PHP с чем-то, что будет хорошо интегрироваться с Wordpress, пожалуйста, разделите (и объясните, как работает ваш код!). Если я сломал любое правило StackOverflow, мои извинения.

Answer 1

трудно сказать, не видя свой код, но есть ли шанс, что ваш скрипт будет выполнен до загрузки всей страницы (или, более конкретно, до того, как элемент с id #menu-item-34 был добавлен в DOM)?

Попробуйте обертывание вашего скрипта внутри функции, а затем установить эту функцию в качестве обработчика OnLoad вашей страницы:

window.onload = function() { 
    /* code goes here */ 
};