Javascript-форум - Не выполняется код обработчика события

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

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Не выполняется код обработчика события (https://javascript.ru/forum/misc/73032-ne-vypolnyaetsya-kod-obrabotchika-sobytiya.html)

Не выполняется код обработчика события

Не открывается модальное окно, ошибку не выдаёт, просто нет реакции при нажатии на кнопку

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8">
	<title>Практика Javascript</title>
	<link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<body onload="fun3(),fun4(),fun5(),fun6()">
<div id ="lesson_6" class="lessons">
		   		<div class="iframe"><iframe width="760" height="515" src="https://www.youtube.com/embed/R2Es_mbSva0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
		   		<button id="modalw">Open Modal</button>
		   		<div id="myModal" class="modal">
		   			<div class="modalContent">
		   				<span class="close">&times;</span>
		   				<p>Modal window</p>
		   			</div>
		   		</div>
				
		   	</div>
		   </div>
		      </div>
		</div>
			   
		

	
	
	<script type="text/javascript" src="js.js"></script>
</body>
</html>

var modal = document.getElementById("myModal");
      btn = document.getElementById('modalw');
      span = document.getElementsByClassName("close")[0];

btn.onclick =  function () {
	modal.style.display = "block";
}





span.onclick = function () {
	modal.style.display = "none";
}

window.onclick = function (event) {
	if (event.target == modal) {
		modal.style.display = "none";
	}
}

Как исправить?

Bomberman,
Он у тебя должен появляться, просто ты этого не замечаешь, сделай ему стайл заметный, что-то типо

<div id="myModal" style="width:100px; height:100px ; background-color:red " >

чтобы мог отслеживать появление

В CSS указаны свойства всех 3 элементов, проверял наличие путем удаление display:none, окно есть.

Код:

.modal{

        display: none;

        position: fixed;

        z-index: 1;

        left: 0;

        top:0;

        width: 100%;

        height: 100%;

        overflow: auto;

        background-color: rgba(0,0,0,0.8);

}



.modalContent{

        background-color: #fefefe;

        margin: 15% auto;

        padding: 20px;

        border:1px solid #888;

        width: 80%;

        color: black;

        text-align: center;



}

.close{

        color:#aaa;

        float: right;

        font-size: 28px;

        font-weight: bold;

}

Я не знаю в чём ошибка, ещё на анимацию задание делаю - работает только через onclick в HTML, этот код никак не работает, выдаёт Uncaught TypeError: Cannot read property 'style' of undefined, at HTMLButtonElement.onclick если через HTML onclick делать

Bomberman,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <title>Практика Javascript</title>
  <style type="text/css">
  .modal{
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
}

.modalContent{
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border:1px solid #888;
  width: 80%;
  color: black;
  text-align: center;

}
.close{
  color:#aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
  </style>
</head>
<body>
<div id ="lesson_6" class="lessons">
       		<button id="modalw">Open Modal</button>
       		<div id="myModal" class="modal">
       			<div class="modalContent">
       				<span class="close">&times;</span>
       				<p>Modal window</p>
       			</div>
       		</div>

       	</div>





  <script>
  var modal = document.getElementById("myModal");
      btn = document.getElementById('modalw');
      span = document.getElementsByClassName("close")[0];

btn.onclick =  function () {
  modal.style.display = "block";
}





span.onclick = function () {
  modal.style.display = "none";
}

window.onclick = function (event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>
</body>
</html>

Нашёл нерабочий код выше, без него работает, спасибо