CODEWITHSUNDEEP
javascripthtml
Eliezer Montoyo
Eliezer Montoyo

Reputation: 13

hide/show div based on the day of the week?

i'm working on a page for a restaurant and i'm trying to make a div show on a specific day of the week. I found this javascript on another question here in Stackoverflow and it worked pretty well:

...
<div id="6" style="display:none">
   <h3>Saturday</h3>

</div>
<script>
  function showhide() {
    var d = new Date();
    var s = document.getElementById(+d.getDay());
    s.style.display = (s.style.display == 'block') ? 'none' : 'block';
  }
  showhide();
</script>
</body>
</html>

This worked well if I only have one div that I want to show in a specific day of the week, but if I have two different divs with the same id it wont work on the second div. For example:

...
<div id="FIRST">
<div id="0" style="display:none">
   <h3>Sunday</h3>

</div>
<div id="1" style="display:none">
   <h3>Monday</h3>

</div>
<div id="2" style="display:none">
   <h3>Tuesday</h3>

</div>
<div id="3" style="display:none">
   <h3>Wednesday</h3>

</div>
<div id="4" style="display:none">
   <h3>Thursday</h3>

</div>
<div id="5" style="display:none">
   <h3>Friday</h3>

</div>
<div id="6" style="display:none">
   <h3>Saturday</h3>

</div>
</div>

<div id="SECOND">
<div id="0" style="display:none">
   <h3>Sunday2</h3>

</div>
<div id="1" style="display:none">
   <h3>Monday2</h3>

</div>
<div id="2" style="display:none">
   <h3>Tuesday2</h3>

</div>
<div id="3" style="display:none">
   <h3>Wednesday2</h3>

</div>
<div id="4" style="display:none">
   <h3>Thursday2</h3>

</div>
<div id="5" style="display:none">
   <h3>Friday2</h3>

</div>
<div id="6" style="display:none">
   <h3>Saturday2</h3>

</div>
</div>
<script>
  function showhide() {
    var d = new Date();
    var s = document.getElementById(+d.getDay());
    s.style.display = (s.style.display == 'block') ? 'none' : 'block';
  }
  showhide();
</script>
</body>
</html>

Please any help is greatly appreciated.

Upvotes: 1

Views: 2537

Answers (2)

thornjad
thornjad

Reputation: 155

ID attributes should always be unique on a page of HTML (ideally in an entire project). JavaScript gets confused when you assign an ID twice.

Instead, use classes. You could do something like this (shortened for brevity):

<div id="FIRST">
  <div class="0" style="display:none">
    <h3>Sunday</h3>
  </div>

  <div class="1" style="display:none">
    <h3>Monday</h3>
  </div>

  <div class="2" style="display:none">
    <h3>Tuesday</h3>
  </div>

  <div class="3" style="display:none">
    <h3>Wednesday</h3>
  </div>

  <div class="4" style="display:none">
    <h3>Thursday</h3>
  </div>

  <div class="5" style="display:none">
    <h3>Friday</h3>
  </div>

  <div class="6" style="display:none">
    <h3>Saturday</h3>
  </div>

</div>

<div id="SECOND">
  <div class="0" style="display:none">
    <h3>Sunday2</h3>
  </div>

  <div class="1" style="display:none">
    <h3>Monday2</h3>
  </div>

  <div class="2" style="display:none">
    <h3>Tuesday2</h3>
  </div>

  <div class="3" style="display:none">
    <h3>Wednesday2</h3>
  </div>

  <div class="4" style="display:none">
    <h3>Thursday2</h3>
  </div>

  <div class="5" style="display:none">
    <h3>Friday2</h3>
  </div>

  <div class="6" style="display:none">
    <h3>Saturday2</h3>
  </div>

</div>
<script>
  function showhide() {
    var d = new Date();
    var s = document.getElementsByClassName(+d.getDay());
    s.style.display = (s.style.display == 'block') ? 'none' : 'block';
  }
  showhide();
</script>

Upvotes: 0

Mathiasfc
Mathiasfc

Reputation: 1697

As @doutriforce commented, use getElementsByClassName to get elements and show them, take a look in this fiddle:

function showhide() {
  var d = new Date();
  var s = document.getElementsByClassName(d.getDay());
  for (var i = 0; i < s.length; i++) {
    s[i].style.display = 'block';
  }
}

showhide();
<div id="FIRST">
  <div class="0" style="display:none">
    <h3>Sunday</h3>

  </div>
  <div class="1" style="display:none">
    <h3>Monday</h3>

  </div>
  <div class="2" style="display:none">
    <h3>Tuesday</h3>

  </div>
  <div class="3" style="display:none">
    <h3>Wednesday</h3>

  </div>
  <div class="4" style="display:none">
    <h3>Thursday</h3>

  </div>
  <div class="5" style="display:none">
    <h3>Friday</h3>

  </div>
  <div class="6" style="display:none">
    <h3>Saturday</h3>

  </div>
</div>

<div class="SECOND">
  <div id="0" style="display:none">
    <h3>Sunday2</h3>

  </div>
  <div class="1" style="display:none">
    <h3>Monday2</h3>

  </div>
  <div class="2" style="display:none">
    <h3>Tuesday2</h3>

  </div>
  <div class="3" style="display:none">
    <h3>Wednesday2</h3>

  </div>
  <div class="4" style="display:none">
    <h3>Thursday2</h3>

  </div>
  <div class="5" style="display:none">
    <h3>Friday2</h3>

  </div>
  <div class="6" style="display:none">
    <h3>Saturday2</h3>

  </div>
</div>

Upvotes: 3

Related Questions