Javascript-форум - Изменить поведение кнопки по клику

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Изменить поведение кнопки по клику (https://javascript.ru/forum/dom-window/69553-izmenit-povedenie-knopki-po-kliku.html)

рони, если js из данного кода вынести во внешний файл, side nav не работает и не открывается. Путь смотрел вроде всё правильно. Отчего так?

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Lato", sans-serif;
    position: relative;
    height: 1700px;
}
 
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}
 
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}
 
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}
 
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}
 
#main {
    position:  fixed;
    left: 0px;
    transition: left .5s;
    padding: 16px;
}
 
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
.sidenav.open {
   width: 250px
}
.sidenav.open ~ #main{
  left:250px;
}
.openclosebtn{
   font-size:30px;cursor:pointer
}
 h1{
   margin: 0 auto;
   text-align: center;
 }
 
</style>
</head>
<body>
 
<div id="mySidenav" class="sidenav">
  <a href="#" class="closebtn" >&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
 
<div id="main">
  <span class="openclosebtn">☰ open</span>
</div>
<h1>test</h1>
<script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>
<script>
window.addEventListener('DOMContentLoaded', function() {
  var sidenav = document.querySelector('.sidenav');
  document.addEventListener("click", function(event){
          var target = event.target;
          if( target.closest(".sidenav") && !target.closest(".closebtn")) return;
          else if(target.closest(".openclosebtn")) {event.preventDefault();
          sidenav.classList.toggle("open")}
          else sidenav.classList.remove("open");
      });
   });
 
</script>
 
</body>
</html>

dupre,
могу только гадать, может polyfill не загрузили или пути прописали не так, что консоль шепчет?

polyfill не загружал...сейчас сделаю посмотрю что станет, отпишу

...да polyfill, уже работает. Рони, а почему polyfill, а не jquery например? В чём тут разница, просто для понять, не просто же так, ты сделал именно на нём?

dupre,
https://developer.mozilla.org/ru/doc...lement/closest
если нужен 1 метод зачем грузить 100, и если метод не нужен, зачем
грузить?
в Internet Explorer и Safari нет closest - и только в них будет загрузка polyfill.closest
но можно убрать загрузку polyfill, но встроить код в строку 89, что встроить смотрите по ссылке там 2 варианта

рони,
правильно ли понимаю, что polyfill по смыслу подобен автопрефиксам css?

Цитата:

Сообщение от dupre

что polyfill по смыслу подобен автопрефиксам css?

скорее, он подобен jquery

dupre,
автопрефиксы : выстрелы из всех орудий, авось какое-то попадёт, polyfill: если зенитки нет, а нужна защита от воздушных целей, ставим стингер или рогатку, из того, что есть под рукой.

Цитата:

Сообщение от рони (Сообщение 464208)

скорее, он подобен jquery

Боюсь уйти от верного понимания:

polyfill подобен jquery лишь как библиотека js;

polyfill видит с какого браузера зашёл посетитель и обнаружив необходимость, сам подстраивается под корректную работу с ним.

jquery никого не знает и ничего не видит; либо работает, либо нет, в зависимости от: браузера, версии браузера и т.п.

Верно ли это?

dupre,
polyfill замена нового метода, старыми средствами, обычно в самом себе содержит проверку, надо менять или нет.
в данном случае идёт запрос 1 метода closest, этот polyfill содержит много замен, в роли стрелочника сервер cdn.polyfill.io, он решает что присылать и надо ли присылать(проверка браузера), jquery делает замену (проверяя поддержку метода,если нет поддержки заменяет) и это их роднит, но jquery делает не только замену стандартных методов, но и содержит кучу других полезных плюшек.

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

dupre,
:-? ... библиотека это коллекция методов, а будет ли в ней присутствовать кросс-браузерность, дело десятое ...

Цитата:

Сообщение от рони (Сообщение 464317)

"библиотека это коллекция методов"

Значит ли это, что библиотечный код лаконичнее в написании, чем классический js?

dupre,
ваш вопрос из разряда, а правда ли, что лёд, водянистее воды.может кто-то другой ответит на ваши вопросы. я далее пас.

рони,

Цитата:

правда ли, что лёд, водянистее воды

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

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