.getElementById cannot find id in document

Asked Apr 03 '19 at 06:22

Active Apr 03 '19 at 07:35

Viewed 86 times

I'm setting up a webpage for a school competition and I want to write some code that when the mouse hovers over the footer, it will expand to full screen.

I have already written the code but one the JavaScript .getElementById() function cannot locate my footer with the id foot.

const footer = document.getElementById("foot");


footer.addEventListener("mouseenter", fullscreen);
footer.addEventListener("mouseleave", original);


function fullscreen() {
    footer.classList.add("fullscreen");
    footer.classList.remove("original");
}

function original() {
    footer.classList.add("original");
    footer.classList.remove("fullscreen");
}

@keyframes fullscreen {
    from {height: 10vh};
    to {height: 100vh};
}

@keyframes original {
    from {height: 100vh};
    to{height: 10vh};
}

.fullscreen {
    animation-name: fullscreen;
    animation-duration: 1500ms;
}

.original {
    animation-name: original;
    animation-duration: 1500ms;
}

<!DOCTYPE HTML>
<html>
  <head>
  </head>
  <body>
    <footer id="foot">
      <a href="#top"><h2>Let's Go</h2></a>
    </footer>
  </body>
</html>

edited Apr 03 '19 at 07:35

Oram

1,421
2
14
20

asked Apr 03 '19 at 06:22

The Pickle

4

Where is the ` – CertainPerformance Apr 03 '19 at 06:22
1

You must create `
` before using `getElementById`
– Ibra Apr 03 '19 at 06:25
1

The code is working. https://jsfiddle.net/L37y1ank/1/ – Roy Bogado Apr 03 '19 at 06:25
By the way you can do it with only css!! – לבני מלכה Apr 03 '19 at 06:30
If the linked canonical isn't the issue, ping me and I'll reopen, but almost sure that it is – CertainPerformance Apr 03 '19 at 06:30
2

thank you lbra, I fixed the error by moving the script tag in my code(which does exist) to the bottom of the body instead of in the head – The Pickle Apr 03 '19 at 06:34
Seems like you missed the – Rameez Apr 03 '19 at 06:37

.getElementById cannot find id in document

0 Answers0