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 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...
CodePudding user response:
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 src="xmas_mgmods-animated.gif" style="height:56%; margin-top:12px;">`;
}
else {
GlobalLogo.innerHTML = `<img src="logo1.png">`;
}
}
initLogo();
<div id="global_logo"></div>