I’m learning JavaScript and I want to make a section of my code change to display: none when clicking on an image that is inside the section of code. I’m trying to add an event handler but it doesn’t seem to be working, even though examples I’ve followed have the same structure.
This is my js file.
let banner = document.getElementById("banner");
let screen1 = document.getElementById("screen1");
function changeDisplay() {
screen1.style.display = "none"
}
banner.addEventListener("click", changeDisplay);
And this is the relevant html portion.
<body>
<script src="interactive.js"></script>
<!-- Header -->
<div id="screen1" class="header section">
<!-- Title -->
<div id="title">
<img src="./resources/triForceIcon.png">
<h1>The Legend of Zelda: Almanac</h1>
<img src="./resources/triForceIcon.png">
</div>
<!-- Subtitle -->
<h3>A Complete Collection of all TLoZ Games</h3>
<!-- Main Image -->
<img id="banner" src="./resources/header-image.jpg">
</div>
</body>
New contributor
Cesar Quevedo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.