EDIT: CURRENT CODE
$(function() {
flagDictionary = {
1 : "assets/WCUFOD.png",
2 : "assets/lesbians.svg",
3 : "assets/upennLogo.png",
4 : "assets/bisexual.png",
5 : "assets/intersex.jpg",
6 : "assets/asexual.png",
}
const time = new Date();
const day = time.getDay()
// note that you can use "#MY_ID_HERE" to get an element with a specific id.
let mainBanner = $("#banner")
mainBanner.setAttribute("src", flagDictionary[1]);
});
I'm trying to change an image based on the day of the week it is. I've done this in a different file, and it worked fine. However, when I transfer it to a new file, the code completely breaks, and generates an error saying "ERROR: setAttribute cannot read properties of null". Relevant code from HTML:
<img src="assets/wcuFOD.png" class="banner" id="banner"></img>
Relevant code from the script.js file I am using:
flagDictionary = {
1 : "assets/WCUFOD.png",
2 : "assets/lesbians.svg",
3 : "assets/Gay.svg",
4 : "assets/bisexual.png",
5 : "assets/intersex.jpg",
6 : "assets/asexual.png",
}
const time = new Date()
day = time.getDay()
mainBanner = document.getElementById("banner")
mainBanner.setAttribute("src", flagDictionary[1])
And here are my imports for the scripts, in case that makes a difference:
<script src="script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
I have other code in my script.js file that works fine in the file with the HTML code I am using, so I believe it's strictly an issue with either the attribute function or grabbing the ID.
Can you try switching the scripts like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="script.js"></script>
And then wrap everything in script.js with $(function(){ /* everything here */ });
This waits for the document to be ready and so elements to be returned.
Like this:
$(function() {
const flags = getFlags();
const time = new Date();
const day = time.getDay()
// note that you can use "#MY_ID_HERE" to get an element with a specific id.
// we need [0] after we get the banner using jQuery. This way we get access to the plain DOM element that has `setAttribute`
let mainBanner = $("#banner")[0];
mainBanner.setAttribute("src", flagDictionary[1]);
// alternatively to using [0], we can use the jQuery method to setting attributes which is .attr("src", "value") like this:
$("#banner").attr("src", "flagDictionary[1]);
});
I suspect that the code that is returning null is returning null because it is running before the DOM is ready. Doing $(function() { /* code to run when DOM is ready */ }); waits for the DOM to load.