Блог

У меня есть функция, которая может загружать бесплатные ресурсы и применять или изменять мою работу. Я использовал эту функцию для создания своего веб-сайта, установив для всех divs значение display=none и нажав на кнопку, появится соответствующее отображение div style block .

Все работало нормально, пока я не добавил музыкальный проигрыватель, создатель которого использовал более высокую библиотеку jQuery (3.2.1> 1.5.2).

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

Ошибка отладчика :

неперехваченная ошибка типа: document.getElementById не является функцией

Но если я не нажимаю на кнопку воспроизведения, все нормально.

 function openPage(pageName) {
  var i;
  var x = document.getElementsByClassName("page");
  for (i = 0; i < x.length; i  ) {
    x[i].style.display = "none";  
  }
  document.getElementById(pageName).style.display = "block";  
}
  

Jquery не препятствует нормальной работе ванильного Javascript.
И поскольку ваш код — это просто Javascript, и, судя по тому, что в нем нет ошибок, трудно понять, почему такая ошибка появится. Это не имеет ничего общего с Jquery.

Единственной предсказуемой ошибкой будет:

Вы могли бы немного улучшить свой код, написав его таким образом:

 function openPage(pageName) {
    Array.from(document.getElementsByClassName('page')).map(page => page.style.display = 'none');
    document.getElementById(pageName).style.display = "block";  
};
  

Вы могли бы сделать его «более защищенным», добавив некоторые проверки:

 function openPage(pageName) {
    if (pageName amp;amp; (typeOf pageName === 'string')) {
        Array.from(document.getElementsByClassName('page')).map(page => page.style.display = 'none');
        var target = document.getElementById(pageName);
        if (target) { target.style.display = "block" };
    }
};
  

И вы могли бы улучшить его, также войдя в консоль, когда проверка не удалась, для отладки:

 function openPage(pageName) {
    if (pageName amp;amp; (typeOf pageName === 'string')) {
        Array.from(document.getElementsByClassName('page')).map(page => page.style.display = 'none');
        var target = document.getElementById(pageName);
        if (target) { 
            target.style.display = "block" 
        } else {
            console.log('No element found, with the ID of:' , pageName)
        };
    } else {
        console.log('Error in openPage() : The provided [pagename] argument must be a [string]. Provided value for [pageName] is:', pageName);
    }
};