How to call a javascript from html using an id

Question

I have the following footer html code

<footer class="footer">
        <div class="container">
            <p class="text-muted"> <a href="about.html">About Us</a> | <a href="contactus.html">Contact Us</a></p>
            <p class="text-muted">&copy; Copyright of abc
                <span id="yearfooter"> </span>
            </p>
        </div>
</footer>
<script src="scripts/abc.js"></script>

and the following for my jscript

$(function() {
$('#yearfooter').footer({
    document.write(new Date().getFullYear());
});

});

I'm fairly new to javascript. I'm trying to get this script to dynamically get the current year and display that in the footer. But with this, I cant seem to get the year displayed at all. I'm not sure what I'm doing wrong here.

Answer 1

Using document.write will overwrite the webpage, so you want something like this:

$(function() {
    $('#yearfooter').text(new Date().getFullYear());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<footer class="footer">
        <div class="container">
            <p class="text-muted"> <a href="about.html">About Us</a> | <a href="contactus.html">Contact Us</a></p>
            <p class="text-muted">&copy; Copyright of abc
                <span id="yearfooter"> </span>
            </p>
        </div>
</footer>