添加類不會使用ClassList.add列出集合

Question

我正在嘗試編寫一個時間戳，該時間戳在打開時將顯示為綠色，而在關閉時將顯示為黑色字體。 以下代碼似乎應該工作。 它在正確解析時間，但未選擇元素。 請看一下：

 <style> .closed-sign { display: inline; display: none; } </style> <script> var myDate = new Date(); var time = 12; alert(time); //hour in military if ((time < 9) || (time >= 17)) { alert("we are closed"); var openHours = document.getElementById("open"); openHours.classList.add("closed-sign"); var closedHours = document.getElementById('closed'); closedHours.classList.remove("closed-sign"); } if ((time > 9) && (time <= 17)) { alert("we are open"); var openHours = document.getElementById("open"); openHours.classList.remove("closed-sign";) var closedHours = document.getElementById("closed"); closedHours.classList.add("closed-sign"); } </script> <div style="float: right;" id="open" class="closed-sign"> <p><span style="color: black">open: </span><span style="color: green;">9:00am - 5pm</span> </div> <div style="float: right;" id="closed" class=""> <p><span style="color: black">closed </span> </div> 

這項工作不應該。 我嘗試了幾件事，甚至遍歷整個收藏集，但沒有任何效果。 我目前放棄嘗試按類進行操作，而是嘗試按id選擇元素，但是由於某種原因我無法添加或刪除類。 有人知道為什么嗎？ 謝謝。

Answer 1

您的腳本中有一個語法錯誤-

closedHours.classList.remove("closed-sign";)

更改為-

closedHours.classList.remove("closed-sign");

請將您JavaScript代碼后HTML代碼，或將您JavaScript代碼轉換成window.onload 事件像原樣

window.onload = function(){
    /*Place your all JavaScript code here*/
}

注意：這是有關window.onload事件的詳細信息

Answer 2

嗨，代碼中存在語法錯誤

openHours.classList.remove("closed-sign";)

代碼應該是

openHours.classList.remove("closed-sign");

並在下面的HTML中加載腳本，我更改了將腳本放在下面的代碼。 這是100％工作檢查。

<style>
    .closed-sign {
        display: inline;
        display: none;
    }
</style>

<div style="float: right;" id="open" class="closed-sign" >
    <p><span style="color: black">open: </span><span style="color: green;">9:00am - 5pm</span>
</div>
<div style="float: right;" id="closed" class="" >
    <p><span style="color: black">closed </span>
</div>
<script>
    var myDate = new Date();
    var time = 12;
    alert(time);
    //hour in military

    if ((time <9) || (time >= 17)){
        alert("we are closed");
        var openHours = document.getElementById("open");
        openHours.classList.add("closed-sign");
        var closedHours = document.getElementById('closed');
        closedHours.classList.remove("closed-sign");
    }

    if ((time > 9) && (time <= 17)){
        alert("we are open");
        var openHours = document.getElementById("open");
        openHours.classList.remove("closed-sign");
        var closedHours = document.getElementById("closed");
        closedHours.classList.add("closed-sign");
    }
</script>