Display different logo on website depending on date

December 14, 2022

I’ve been trying to display a different logo on my website depending on the date (to add a christmas logo that will automatically be displayed in december).
Here’s what I’ve got for now:

<img class="logo" id="global_logo" style="height:56%; margin-top:12px;" src="">
<script>
    function initLogo(){
        var GlobalDate = date.getMonth()+1;
        var GlobalLogo = document.getElementById("global_logo");
        if (GlobalDate == 12) {
            GlobalLogo.src = "xmas_mgmods-animated.gif"
        }else{
            GlobalLogo.src = "logo1.png"
        }
        /**/
        alert('Script working');
    }
    initLogo();
</script>

I’ve got two problems: first, the logo is not showing up at all (no logo is)
Second: I want to know if I can set the script to also change the style applied for each logo (the style="height:56%; margin-top:12px;"is only needed for the gif, and not for the png).

I’ve tried to add a line instead of changing the source depending of the ID:

function initLogo(){
    var GlobalDate = date.getMonth()+1;
    var content = document.getElementById("global_logo");
    var GlobalIcon = "";
    if (GlobalDate == 12) {
        html += "<img class='logo' src='logo1.png'>";
    }else{
        html += "<img class='logo' style='height:56%; margin-top:12px;' src='xmas_mgmods-animated.gif'>";
    }
    content.innerHTML += GlobalIcon;
    alert('Script working');
}

It doesn’t work…

>Solution :

You were using date without having it defined anywhere, assuming you copied it from somewhere else; it was supposed to be an instance of Date.

function initLogo(){
  const date = new Date();
  
  var GlobalDate = date.getMonth()+1;
  var GlobalLogo = document.getElementById("global_logo");
  
  if(GlobalDate == 12) {
      GlobalLogo.innerHTML = `<img class="logo" src="xmas_mgmods-animated.gif" style="height:56%; margin-top:12px;">`;
  }
  else {
      GlobalLogo.innerHTML = `<img class="logo" src="logo1.png">`;
  }
}
initLogo();