Как победить ошибку «Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null»?

Question

[LilJane]

Коллеги, имеется код (приведенный ниже). При его проигрывании в браузере, консоль даёт ошибку "Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null(anonymous function) @ (index):149"
помогите разобраться

<script>
var changeClass = function (r,className1,className2) {
    var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)");
    if( regex.test(r.className) ) {
        r.className = r.className.replace(regex,' '+className2+' ');
    }
    else{
        r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"),' '+className1+' ');
    }
    return r.className;
};

var menuElements = document.getElementById('menu');
menuElements.insertAdjacentHTML('afterBegin','<button type="button" id="menutoggle" class="navtoogle" aria-hidden="true">Menu</button>');  <b>ОШИБКА в этой строке</b>
//  Toggle the class on click to show / hide the menu
document.getElementById('menutoggle').onclick = function() {
    changeClass(this, 'navtoogle active', 'navtoogle');
}
</script>

Comments

[Евгений Петров]

И где он?)

[LilJane]

Евгений Петров: извиняюсь, забыл взять в

Answer 1

[Денис Инешин]

1. Можно еще засунуть свой скрипт перед самым закрытием тега BODY
2. Для замены классов посмотрите на это: https://developer.mozilla.org/en-US/docs/Web/API/E...

Comments

[LilJane]

Спасибо, решение предоставил: Aingis
Ваш вариант пробовать не буду, т.к. всё работает, но по логике, он тоже верен.

[Денис Инешин]

LilJane:
1. caniuse.com/#feat=domcontentloaded - если IE8 еще вариант
2. Вставлять script перед закрытием body - дает еще один бонус, помимо решение вашей проблемы. Это неблокирующая загрузка скриптов.

[Евгений Петров]

Неблокирующий вариант — async (как вариант defer) в скрипте. Пока не загрузятся синхронные скрипты, document.close() не будет вызвано. Пусть даже скрипты стоят и в конце body.