Javascript код не работает на сервере веб-хостинга

Question

У меня есть одна очень странная проблема.Код Javascript на моей веб-странице не работает должным образом.Странно то, что когда я запускаю страницу на localhost (wamp), все работает отлично, как и должно.Проблема начинается, когда я загружаю веб-страницу на веб-хостинг, одна часть кода не работает.Часть, которая должна вызывать всплывающие окна (теги div), вообще не работает.При нажатии на ссылку ничего не происходит.

Я пробовал использовать два разных бесплатных веб-хостинга, и на обоих возникла одна и та же проблема.Я также попытался запустить инструменты разработчика (F12), но ошибок, как и ожидалось, нет, потому что на localhost все отлично работает.
Вот конкретный код, который не работает.

<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times</a>
     <a href="javascript:void(0)" id="myBtn">T1</a>
     <a href="javascript:void(0)" id="myBtn2">T2</a>
  <a href="javascript:void(0)" id="myBtn3">T3</a>
  <a href="javascript:void(0)" id="myBtn4">T4</a>
</div>

<script>    
  var modal = document.getElementById('myModal'); 
  var btn = document.getElementById("myBtn");   
  var span = document.getElementsByClassName("close")[0];     
  btn.onclick = function() {
    modal.style.display = "block";
  }
  span.onclick = function() {
    modal.style.display = "none";
  }
</script>
<script> 
  var modal2 = document.getElementById('myModal2');   
  var btn2 = document.getElementById("myBtn2");   
  var span2 = document.getElementsByClassName("close")[1];     
  btn2.onclick = function() {
    modal2.style.display = "block";
  }     
  span2.onclick = function() {
    modal2.style.display = "none";
  }    
</script>
<script> 
  var modal3 = document.getElementById('myModal3');
  var btn3 = document.getElementById("myBtn3");    
  var span3 = document.getElementsByClassName("close")[2];     
  btn3.onclick = function() {
    modal3.style.display = "block";
  }
  span3.onclick = function() {
    modal3.style.display = "none";
  }    
</script>
<script>    
  var modal4 = document.getElementById('myModal4');    
  var btn4 = document.getElementById("myBtn4");    
  var span4 = document.getElementsByClassName("close")[3];       
  btn4.onclick = function() {
    modal4.style.display = "block";
  }  
  span4.onclick = function() {
    modal4.style.display = "none";
  }   
</script>

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

Answer 1

Мы можем упростить большую часть кода, если мы используем functions и передаем некоторые параметры.

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

Обратите внимание, как мы тестируем event.target, используя matches.

Я набрал Модал для демонстрации.

// First lets use a functions
const showModal = (modalId) => {
  const modal = document.querySelector(`#${modalId}`);
  modal.style.display = 'block';
};

const hideModal = (modalId) => {
  const modal = document.querySelector(`#${modalId}`);
  modal.style.display = 'none'; 
};

// Now lets listen for any click
document.addEventListener('click', (e) => {
  // Based on what was clicked we will do something.
  if(e.target.matches('.showmodal')) showModal(e.target.dataset.modal);
  
  if(e.target.matches('.close')) hideModal(e.target.parentNode.id);

});

.modal {
  margin-top: 25px;
  padding: 15px;
  color: white;
  background-color: blue;
  border-radius: 7px;
  display: none;
}

span.close {
  float: right;
  font-weight: bold;
}

<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times</a>
     <a href="#" id="myBtn" class="showmodal" data-modal="myModal">T1</a>
     <a href="#" id="myBtn2" class="showmodal" data-modal="myModal2">T2</a>
  <a href="#" id="myBtn3" class="showmodal" data-modal="myModal3">T3</a>
  <a href="#" id="myBtn4" class="showmodal" data-modal="myModal4">T4</a>
</div>

<div id="myModal" class="modal">Modal 1 <span class="close">Close Me</span></div>
<div id="myModal2" class="modal">Modal 2 <span class="close">Close Me</span></div>
<div id="myModal3" class="modal">Modal 3 <span class="close">Close Me</span></div>
<div id="myModal4" class="modal">Modal 4 <span class="close">Close Me</span></div>