Issue using setAttribute in HTML/CSS File-CodePudding

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"  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.

CodePudding user response：

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.
    let mainBanner = $("#banner")
    mainBanner.setAttribute("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.