0
350
ViewsMy Javascript doesn't seem to be working - could the DOM have changed?
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:
Copyright © 2019 - Joe Bloggs.
I expect it to contain:
Copyright © 2019 - 2021 Joe Bloggs.
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?
1 answers
Answer question0
Your code is working properly :)
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>