Javascript函数unhide元素似乎没有调用var

Javascript function unhide element seems not calling out var

本文关键字：调用 var 函数 unhide 元素 Javascript      更新时间：2023-09-26

试图在我的网站标题上显示一条消息，在那里应该每天根据日期更改。使用下面的脚本，但似乎没有调用变量，因为它没有显示任何东西，我不知道哪一个是错过了这一点。

<script type="function/javascritp">
function unhide(id) {
   var element = document.getElementById(id);
   element.className = element.className.replace('hidden', '');
}
switch((new Date()).getDay()) {
    case 0:
        // Sunday
        unhide('sun');
        break;
    case 1:
        // Monday
        unhide('mon');
        break;
    case 2:
        // Tuesday
        unhide('tues');
        break;
    case 3:
        // Wednesday
        unhide('wed');
        break;
    case 4:
        // Thursday
        unhide('thurs');
        break;
    case 5:
        // Friday
        unhide('fri');
        break;
    case 6:
        // Saturday
        unhide('sat');
        break;
};
</script>
</head>
<body>
<Header>
<div id="sun" class="hidden">Today is Sunday</div>
<div id="mon" class="hidden">Today is Monday</div>
<div id="tues" class="hidden">Today is Tuesday</div>
<div id="wed" class="hidden">Today is Wednesday</div>
<div id="thurs" class="hidden">Today is Thursday</div>
<div id="fri" class="hidden">Today is Friday</div>
<div id="sat" class="hidden">Today is Saturday</div>
</header>
</body>

我用的是css代码，

.hidden {
    display: none;
}

必须是.hidden，而不是hidden;你忘了添加句号.，其余的看起来都很好

function unhide(id) {
   var element = document.getElementById(id);
   element.className = element.className.replace('hidden', '');
}
switch((new Date()).getDay()) {
    case 0:
        // Sunday
        unhide('sun');
        break;
    case 1:
        // Monday
        unhide('mon');
        break;
    case 2:
        // Tuesday
        unhide('tues');
        break;
    case 3:
        // Wednesday
        unhide('wed');
        break;
    case 4:
        // Thursday
        unhide('thurs');
        break;
    case 5:
        // Friday
        unhide('fri');
        break;
    case 6:
        // Saturday
        unhide('sat');
        break;
};
.hidden{display:none}
<Header>
<div id="sun" class="hidden">Today is Sunday</div>
<div id="mon" class="hidden">Today is Monday</div>
<div id="tues" class="hidden">Today is Tuesday</div>
<div id="wed" class="hidden">Today is Wednesday</div>
<div id="thurs" class="hidden">Today is Thursday</div>
<div id="fri" class="hidden">Today is Friday</div>
<div id="sat" class="hidden">Today is Saturday</div>
</Header>

对于初学者来说，语法问题:脚本声明type="function/javascritp"应该是type="text/javascript"。不确定不同的浏览器如何处理未知的脚本类型，但很可能代码根本不执行。

使用getElementById时出现'issue'。如果在加载DOM之前使用它，那么所讨论的元素可能不存在，getElementById将返回null。在这个例子中，脚本似乎位于head部分，在那里它肯定是一个问题。为了防止这种情况，您可以在window.onload事件中调用unhide函数。(更完整的信息在这里)

为了更好地概述，

在本例中擅自将switch case更改为数组，但原则保持不变:

<script type="text/javascript">    
function unhide(id) {
   var element = document.getElementById(id);
   element.className = element.className.replace('hidden', '');
}
window.onload = function(){
    var day = (new Date()).getDay();       
    var days = ['sun','mon', 'tues', 'wed', 'thurs','fri', 'sat'];
    unhide(days[day]);
};
</script>

注意，尽管unhide函数是在unload之前声明的，但它直到在onload事件中使用时才被调用。getElementById也被调用了

这是在您的情况下最容易实现的。

function unhide(id) {
   var element = document.getElementById(id);
   element.className = element.classList.remove('hidden');
}
相关文章：