How to change background image using javaScript with if conditions?

Question

I am making a calendar clock and I want to change the background image per month using if statements. I am trying but all my ways are not working. Can you help me with this?

 var tday = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; var tmonth =["January","February","March","April","May","June","July","August","September","October","November","December"]; function getCalendar(){ var d = new Date(); var nday = d.getDay(); var nmonth = d.getMonth(); var ndate = d.getDate(); var nyear = d.getFullYear(); var dateText =""+tday[nday]; var monthText = ""+tmonth[nmonth]; var nCalendar = ""+monthText + " " + ndate + ", " + nyear document.getElementById('nDay').innerHTML = dateText; document.getElementById('nCalendar').innerHTML = nCalendar; document.getElementById("whatDay").style.backgroundImage = "url('images/january.png')"; }

 <div id="whatDay"> <div id="nDay" class="calendarDay">wednesday</div> <div id="nCalendar" class="calendar">December 30, 2050</div> <div id="clockbox" class="myClock"></div> </div>

Answer 1

You can use an array with all the stored images, then assign that value to a background-image CSS property through the JS DOM.

Note these images are from Wikimedia, so don't use them in your personal projects.

 var tday = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; var tmonth =["January","February","March","April","May","June","July","August","September","October","November","December"]; var images = ["https://upload.wikimedia.org/wikipedia/commons/b/b9/Aftermath_of_January_2018_North_American_blizzard_2.jpg", "https://upload.wikimedia.org/wikipedia/commons/7/7e/Iron_Bridge_east_side_in_February_2019.jpg", "https://commons.wikimedia.org/wiki/File:Flower_in_the_Flagstaff_snow.jpg", "https://upload.wikimedia.org/wikipedia/commons/0/03/Flowers_on_Potsdam_street_5_%28April%2C_2018%29.jpg", "https://upload.wikimedia.org/wikipedia/commons/5/50/Poison_ivy_in_May_beside_Appalachian_Trail_in_Rockfish_Gap_VA_area_1.jpg", "https://upload.wikimedia.org/wikipedia/commons/d/de/Caesars_Head_State_Park_overlook%2C_June_2019_1.JPG", "https://upload.wikimedia.org/wikipedia/commons/f/f9/F%C3%A5r%C3%B6_fyr_July_2019_06.jpg", "https://upload.wikimedia.org/wikipedia/commons/1/14/Athens_and_Piraeus_from_Mount_Lycabettus_on_August_24%2C_2019.jpg", "https://upload.wikimedia.org/wikipedia/commons/3/37/Cloudy_weather_at_Stortinden%2C_Skrovkjosen%2C_Tysfjord%2C_Norway%2C_2018_September.jpg", "https://upload.wikimedia.org/wikipedia/commons/6/6a/John_Everett_Millais_-_Chill_October.JPG", "https://upload.wikimedia.org/wikipedia/commons/c/c3/Inspiration_Point_Bryce_Canyon_November_2018_panorama.jpg", "https://upload.wikimedia.org/wikipedia/commons/7/72/Snow_Scene_at_Shipka_Pass_1.JPG"]; function getCalendar(){ var d = new Date(); var nday = d.getDay(); var nmonth = d.getMonth(); var ndate = d.getDate(); var nyear = d.getFullYear(); var dateText =""+tday[nday]; var monthText = ""+tmonth[nmonth]; var nCalendar = ""+monthText + " " + ndate + ", " + nyear; document.getElementById('nDay').innerHTML = dateText; document.getElementById('nCalendar').innerHTML = nCalendar; document.getElementById("whatDay").style.backgroundImage = "url('" + images[nmonth] + "')"; } getCalendar();

 <div id="whatDay" style="height:400px;background-repeat:no-repeat;background-size:cover;"> <div id="nDay" class="calendarDay"></div> <div id="nCalendar" class="calendar"></div> <div id="clockbox" class="myClock"></div> </div>