Как заставить этот код jQuery работать на версии 3.2.1

Question

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

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

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

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

uncaught TypeError: 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";  
}

Answer 1

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

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

pageName не передается в качестве аргумента; pageName передается, но не является строкой; в вашем документе не существует элемента с идентификатором, равным значению pageName .

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

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 && (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 && (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);
    }
};