-1

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

Mike Gread
  • 3
  • 2
  • Use the [browser console (dev tools)](//webmasters.stackexchange.com/q/8525) (hit `F12`), read any errors. Where did you define `date`? – Sebastian Simon Dec 14 '22 at 20:26
  • Hello Sebastian, thank you for your answer You're not the only one who spotted my mistake there, I didn't know I needed to define it. Thanks a lot for your answer ! (Oh and apparently I wasn't using the getElementById correctly too...) – Mike Gread Dec 14 '22 at 20:32

1 Answers1

0

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();
<div id="global_logo"></div>
Nora Söderlund
  • 1,148
  • 2
  • 18