CODEWITHSUNDEEP
javascriptjqueryhtml
Sagar Rawal
Sagar Rawal

Reputation: 399

Use Javascript with Two Same class of two div

I'm in big trouble now. Here I have two tables that has routine of Sunday and Monday and I'm using below code to highlight the background of any row as per the current time. It only highlight row of Sun and not Mon or if I pur Mon table before Sunday in code editor, then it works for Monday only and don't highlight the row of Sunday.

What might be the problem here?? Any help would be largely appreciated.

Here is the live demo of my Code

https://jsbin.com/desofuvevu/edit?html,css,js,output

function openCity(evt, cityName, today) {
  var i, tabcontent, tablinks;
  tabcontent =
    document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  if (typeof today == 'undefined') {
    evt.currentTarget.className += " active";
  } else {
    tablinks[today].className += " active";
  }
}

let now = new Date().getHours() * 100 + new
Date().getMinutes();
let times = [45, 100, 145];
let ids = ['ra1', 'ra3', ];
let selected = ids[times.reduce((acc, curr, idx) => now >=
  curr ? idx : acc)];
if (selected)
  document.getElementById(selected).style.backgroundColor = 'red';
.tabcontent { display: none }
<div class="tab" style="margin-top: 1.6%;  ">
  <button class="tablinks" onclick="openCity(event, 'Sun0') ">Sun</button>
  <button class="tablinks" onclick="openCity(event, 'Mon0')">Mon</button>

</div>

<div id="Sun0" class="tabcontent" id="np">


  <div style="overflow-x:auto;">
    <table>
      <col width="65%">
      <col width="35%">
      <tr>
        <th>Class</th>
        <th>Time</th>
      </tr>

      <tr>
        <td id="ra1">10:15-11:00AM</td>
        <td style="background:black; color:Yellow;">It is Sunday </td>

      </tr>
      <tr>
        <td id="ra3">11:00-11:45AM</td>
        <td style="background:black; color:Yellow;">It is Sunday</td>

      </tr>
    </table>
  </div>
</div>


<div id="Mon0" class="tabcontent">

  <!--Monnday-->
  <div style="overflow-x:auto;">
    <table>
      <col width="65%">
      <col width="35%">
      <tr>
        <th>Class</th>
        <th>Time</th>
      </tr>

      <tr>
        <td id="ra1">10:15-11:00AM</td>
        <td style="background:black; color:Yellow;">It is Monday</td>

      </tr>
      <tr>
        <td id="ra3">11:00-11:45AM</td>
        <td style="background:black; color:Yellow;">It is Monday</td>

      </tr>
    </table>
  </div>
</div>

Upvotes: 0

Views: 355

Answers (1)

Dij
Dij

Reputation: 9808

You should not use same id for multiple elements in your code, the selector will only return the first matched element in such a case. Use class instead and document.getElementsByClassName() which will return a list of elements and you will have to iterate over the list and set style for each element, something like this:

function openCity(evt, cityName, today) {
  var i, tabcontent, tablinks;
  tabcontent =
    document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  if (typeof today == 'undefined') {
    evt.currentTarget.className += " active";
  } else {
    tablinks[today].className += " active";
  }
}

let now = new Date().getHours() * 100 + new
Date().getMinutes();
let times = [45, 100, 145];
let classes = ['ra1', 'ra3', ];
let selected = classes[times.reduce((acc, curr, idx) => now >=
  curr ? idx : acc)];
if (selected){
  var elements = document.getElementsByClassName(selected);
  for(var i=0;i<elements.length; i++)
      elements[i].style.background = 'red';
}
.tabcontent { display: none }
<div class="tab" style="margin-top: 1.6%;  ">
  <button class="tablinks" onclick="openCity(event, 'Sun0') ">Sun</button>
  <button class="tablinks" onclick="openCity(event, 'Mon0')">Mon</button>

</div>

<div id="Sun0" class="tabcontent" id="np">


  <div style="overflow-x:auto;">
    <table>
      <col width="65%">
      <col width="35%">
      <tr>
        <th>Class</th>
        <th>Time</th>
      </tr>

      <tr>
        <td class="ra1">10:15-11:00AM</td>
        <td style="background:black; color:Yellow;">It is Sunday </td>

      </tr>
      <tr>
        <td class="ra3">11:00-11:45AM</td>
        <td style="background:black; color:Yellow;">It is Sunday</td>

      </tr>
    </table>
  </div>
</div>


<div id="Mon0" class="tabcontent">

  <!--Monnday-->
  <div style="overflow-x:auto;">
    <table>
      <col width="65%">
      <col width="35%">
      <tr>
        <th>Class</th>
        <th>Time</th>
      </tr>

      <tr>
        <td class="ra1">10:15-11:00AM</td>
        <td style="background:black; color:Yellow;">It is Monday</td>

      </tr>
      <tr>
        <td class="ra3">11:00-11:45AM</td>
        <td style="background:black; color:Yellow;">It is Monday</td>

      </tr>
    </table>
  </div>
</div>

Upvotes: 1

Related Questions