CODEWITHSUNDEEP
javascriptcssif-statement
baryjones23saturn
baryjones23saturn

Reputation: 81

adding a class is not listing collection with ClassList.add

I am trying to write a time stamp that will be green when open and display closed in black font when closed. The following code seems like it should work. It is parsing the time correctly but it is not selecting the element. Please take a look: 

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

Shouldn't this work. I have tried several things even looping through the collection but nothing is working. I currently discarded trying to do it by class and went to trying to select element by id but I can't add or remove a class for some reason. Could anyone see why? thank you.

Upvotes: 0

Views: 115

Answers (2)

Mahesh Sanjeewa
Mahesh Sanjeewa

Reputation: 217

Hi there was syntax error in code 

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

code should be

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

and load scripts in bellow the html, I changed the code putting scripts in bellow. this is 100% working check this.

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

Upvotes: 0

Sumon Sarker
Sumon Sarker

Reputation: 2795

There is an Syntax error in your script -

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

Change it to -

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

Place your JavaScript code after HTML code Or Place your JavaScript code into window.onload Event like as-

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

Note : Here is the details about window.onload Event

Upvotes: 1

Related Questions