Check out my code snippet below. The inline JavaScript alert works fine, but the external one isn't firing. Every time I reload the page, I'm greeted with a console error message saying "TypeError: tileBlock is null". Any suggestions on how to resolve this? I prefer not to resort to writing all of my JavaScript event handlers inline. Thank you for your help!
#tileBlock {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #0b0b0b;
background-position: center;
background-repeat: no-repeat;
background-image: url(photo.jpg);
border: 20px solid #fff;
background-size: cover;
}
@media (max-width: 400px) {
#tileBlock {
border-width: 8px;
}
}
<body>
<div class="wrapper" id="tileBlock" onclick="alert('You clicked (inline)')"></div>
</body>
var tileBlock = document.getElementById('tileBlock');
tileBlock.onclick = function() {
alert('you clicked(external script)');
}