My Javascript doesn't seem to be working - could the DOM have changed?

Question

Like many of us, I want to keep my code as DRY(Don't Repeat Yourself) as possible - and that includes my website. I would like to do this by importing the common footer onto all pages - which is fine, and I'm doing this as follows:

page.html

<html> 
  <head> 
    <script type="text/javascript"> 
    $(function(){
      $("#footer").load("./Components/footer.html");
    });
    </script> 
  </head> 

  <body>
    This is my main page content
     
    <div id="footer"></div>  
  </body> 
</html>

footer.html

<div class="copyright-notice">
  <p align=center>
    Copyright © 2019 - <class id="getyear"></class> Joe Bloggs.
  </p>
</div>
<script>
  let d = new Date();
  document.getElementById("getyear").innerHTML = (new Date()).getFullYear();
</script>

The issue here the footer gets included - but it only contains the following:

I expect it to contain:

I'm wondering if it's a DOM problem. I can see, by the way, that the JavaScript is being executed - because if I put <class id="getyear"></class> into page.html then the JavaScript from footer.html works and puts the date in correctly.

It's a bit of a poser. Any ideas?

Answer 1

Your code is working flawlessly :)

This is the screenshot

page.html

<html>
  <head>
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
    <script type="text/javascript">
      $(function () {
        $("#footer").load("./footer.html");
      });
    </script>
  </head>
  <body>
    This is my main page content
    <div id="footer"></div>
  </body>
</html>

footer.html

<div class="copyright-notice">
  <p align="center">
    Copyright © 2019 - <class id="getyear"></class> Joe Bloggs.
  </p>
</div>
<script>
  let d = new Date();
  document.getElementById("getyear").innerHTML = new Date().getFullYear();
</script>

My Javascript doesn't seem to be working - could the DOM have changed?

Question

1 answers

solution1
0 2021-11-13 12:28:29

My Javascript doesn't seem to be working - could the DOM have changed?

Question

1 answers

solution1 0 2021-11-13 12:28:29

solution1
0 2021-11-13 12:28:29