Home > OS >  Automatically select tab from current day
Automatically select tab from current day

Time：11-28

I query a provider's API to get the broadcast schedule for the week. I make the individual days selectable via different tabs. This works very well. However, I am having trouble automatically selecting the current day if no day of the week has been manually selected yet.

What do I need to do to make the current day of the week automatically selected if no tab has been clicked yet?

Here is my fiddle with the code currently used: https://jsfiddle.net/4sd7otwq

function openDAY(evt, DAYName) {
  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(DAYName).style.display = "block";
  evt.currentTarget.className  = " active";
}

var show_schedule = function(schedule){
  var no_entry = 'Leider keine Sendung';
  var days = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
  var days_buffer = {mon: [], tue: [], wed: [], thu: [], fri: [], sat: [], sun: []}; 
  Array.prototype.slice.call(schedule).forEach(function(schedule_entry) {
    var start_time = schedule_entry.hour;
    if (start_time < 10) { start_time = '0'   start_time }
    start_time = start_time   ':00 Uhr';
    days_buffer[schedule_entry.day].push('<span style="display: flex; padding-bottom:8px;">'   start_time   ' - '   schedule_entry.name   '</span>');
  });
  Array.prototype.slice.call(days).forEach(function(schedule_days) {
    if (document.getElementById('api_lfm_schedule_'   schedule_days) !== null) {
      if (days_buffer[schedule_days].length >= 1) {
        document.getElementById('api_lfm_schedule_'   schedule_days).innerHTML = days_buffer[schedule_days].join('');
      } else {
        document.getElementById('api_lfm_schedule_'   schedule_days).innerHTML = no_entry;
      }
    }
  }); 
};
laut.fm.station('80er-90er').schedule(show_schedule);
body {font-family: Arial;}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h2>Broadcast schedule</h2>

<script type="text/javascript" src="//api.laut.fm/js_tools/lautfm_js_tools.0.10.0.js.min.js" ></script>
<div class="tab">
  <button class="tablinks" onclick="openDAY(event, 'Monday')">Monday</button>
  <button class="tablinks" onclick="openDAY(event, 'Tuesday')">Tuesday</button>
  <button class="tablinks" onclick="openDAY(event, 'Wednesday')">Wednesday</button>
  <button class="tablinks" onclick="openDAY(event, 'Thursday')">Thursday</button>
  <button class="tablinks" onclick="openDAY(event, 'Friday')">Friday</button>
  <button class="tablinks" onclick="openDAY(event, 'Saturday')">Saturday</button>
  <button class="tablinks" onclick="openDAY(event, 'Sunday')">Sunday</button>
    
</div>

<div id="Monday" class="tabcontent">
  <div id="api_lfm_schedule_mon">Loading...</div>
</div>

<div id="Tuesday" class="tabcontent">
 <div id="api_lfm_schedule_tue">Loading...</div> 
</div>

<div id="Wednesday" class="tabcontent">
  <div id="api_lfm_schedule_wed">Loading...</div>
</div>
<div id="Thursday" class="tabcontent">
 <div id="api_lfm_schedule_thu">Loading...</div>
</div>

<div id="Friday" class="tabcontent">
<div id="api_lfm_schedule_fri">Loading...</div>
</div>

<div id="Saturday" class="tabcontent">
  <div id="api_lfm_schedule_sat">Loading...</div>
</div>
    <div id="Sunday" class="tabcontent">
<div id="api_lfm_schedule_sun">Loading...</div>
</div>
</body>
</html>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

It isn't that easy the way your code works right now. Having inline event handlers (onclick="...") almost always makes things more complicated. This is the case here too.

Instead, you can store the tabs and tab-links in arrays, and use loops to set the attributes and add the events to them.

With that done, you can easily call openDAY when the application starts to set the current day of the week.

You can get the day of the week by:

new Date().getDay()

But this will treat Sunday as the first day of the week, so we do some math with it to make it the last.

var tablinks = Array.prototype.slice.call(document.getElementsByClassName("tablinks"));
var tabs = Array.prototype.slice.call(document.getElementsByClassName("api_lfm_schedule"));
var tabcontent = Array.prototype.slice.call(document.getElementsByClassName("tabcontent"));
  
function openDAY(day) {
  var i;
  for (i = 0; i < tabcontent.length; i  ) {
    tabcontent[i].className = tabcontent[i].className.replace(" active", "");
  }
  for (i = 0; i < tablinks.length; i  ) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  tabcontent[day].className  = " active";
  tablinks[day].className  = " active";
}

tablinks.forEach(function (tablink, day) {
  tablink.addEventListener('click', function() {
    openDAY(day)
  })
})

openDAY((new Date().getDay() || 7) - 1)

var show_schedule = function(schedule){
  var no_entry = 'Leider keine Sendung';
  var days = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
  var days_buffer = {mon: [], tue: [], wed: [], thu: [], fri: [], sat: [], sun: []}; 
  Array.prototype.slice.call(schedule).forEach(function(schedule_entry) {
    var start_time = schedule_entry.hour;
    if (start_time < 10) { start_time = '0'   start_time }
    start_time = start_time   ':00 Uhr';
    days_buffer[schedule_entry.day].push('<span style="display: flex; padding-bottom:8px;">'   start_time   ' - '   schedule_entry.name   '</span>');
  });
  Array.prototype.slice.call(tabs).forEach(function(tab, index) {
    if (days_buffer[days[index]].length >= 1) {
      tab.innerHTML = days_buffer[days[index]].join('');
    } else {
      tab.innerHTML = no_entry;
    }
  }); 
};
laut.fm.station('80er-90er').schedule(show_schedule);
body {
  font-family: Arial;
}


/* Style the tab */

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}


/* Style the buttons inside the tab */

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}


/* Change background color of buttons on hover */

.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */

.tab button.active {
  background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.tabcontent.active {
  display: block;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <h2>Broadcast schedule</h2>

  <script type="text/javascript" src="//api.laut.fm/js_tools/lautfm_js_tools.0.10.0.js.min.js"></script>
  <div class="tab">
    <button class="tablinks">Monday</button>
    <button class="tablinks">Tuesday</button>
    <button class="tablinks">Wednesday</button>
    <button class="tablinks">Thursday</button>
    <button class="tablinks">Friday</button>
    <button class="tablinks">Saturday</button>
    <button class="tablinks">Sunday</button>

  </div>

  <div class="tabcontent">
    <div class="api_lfm_schedule">Loading...</div>
  </div>

  <div class="tabcontent">
    <div class="api_lfm_schedule">Loading...</div>
  </div>

  <div class="tabcontent">
    <div class="api_lfm_schedule">Loading...</div>
  </div>
  <div class="tabcontent">
    <div class="api_lfm_schedule">Loading...</div>
  </div>

  <div class="tabcontent">
    <div class="api_lfm_schedule">Loading...</div>
  </div>

  <div class="tabcontent">
    <div class="api_lfm_schedule">Loading...</div>
  </div>
  <div class="tabcontent">
    <div class="api_lfm_schedule">Loading...</div>
  </div>
</body>

</html>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can do this with the help of Intl.DateTimeFormat.

function openDAY(evt, DAYName) {
  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(DAYName).style.display = "block";
  evt.currentTarget.className  = " active";
}

var show_schedule = function(schedule){
  var no_entry = 'Leider keine Sendung';
  var days = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
  var days_buffer = {mon: [], tue: [], wed: [], thu: [], fri: [], sat: [], sun: []}; 
  Array.prototype.slice.call(schedule).forEach(function(schedule_entry) {
    var start_time = schedule_entry.hour;
    if (start_time < 10) { start_time = '0'   start_time }
    start_time = start_time   ':00 Uhr';
    days_buffer[schedule_entry.day].push('<span style="display: flex; padding-bottom:8px;">'   start_time   ' - '   schedule_entry.name   '</span>');
  });
  Array.prototype.slice.call(days).forEach(function(schedule_days) {
    if (document.getElementById('api_lfm_schedule_'   schedule_days) !== null) {
      if (days_buffer[schedule_days].length >= 1) {
        document.getElementById('api_lfm_schedule_'   schedule_days).innerHTML = days_buffer[schedule_days].join('');
      } else {
        document.getElementById('api_lfm_schedule_'   schedule_days).innerHTML = no_entry;
      }
    }
  }); 
};


laut.fm.station('80er-90er').schedule(show_schedule);

const options = { weekday: 'long'};
const currentDay = new Intl.DateTimeFormat('en-US', options).format(new Date());

const tablinks = document.getElementsByClassName("tablinks");
for (let i = 0; i < tablinks.length; i  ) {
  if(tablinks[i].textContent === currentDay) {
    tablinks[i].classList.add("active");
  }
}
body {
  font-family: Arial;
}


/* Style the tab */

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}


/* Style the buttons inside the tab */

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}


/* Change background color of buttons on hover */

.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */

.tab button.active {
  background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <h2>Broadcast schedule</h2>

  <script type="text/javascript" src="//api.laut.fm/js_tools/lautfm_js_tools.0.10.0.js.min.js"></script>
  <div class="tab">
    <button class="tablinks" onclick="openDAY(event, 'Monday')">Monday</button>
    <button class="tablinks" onclick="openDAY(event, 'Tuesday')">Tuesday</button>
    <button class="tablinks" onclick="openDAY(event, 'Wednesday')">Wednesday</button>
    <button class="tablinks" onclick="openDAY(event, 'Thursday')">Thursday</button>
    <button class="tablinks" onclick="openDAY(event, 'Friday')">Friday</button>
    <button class="tablinks" onclick="openDAY(event, 'Saturday')">Saturday</button>
    <button class="tablinks" onclick="openDAY(event, 'Sunday')">Sunday</button>

  </div>

  <div id="Monday" class="tabcontent">
    <div id="api_lfm_schedule_mon">Loading...</div>
  </div>

  <div id="Tuesday" class="tabcontent">
    <div id="api_lfm_schedule_tue">Loading...</div>
  </div>

  <div id="Wednesday" class="tabcontent">
    <div id="api_lfm_schedule_wed">Loading...</div>
  </div>
  <div id="Thursday" class="tabcontent">
    <div id="api_lfm_schedule_thu">Loading...</div>
  </div>

  <div id="Friday" class="tabcontent">
    <div id="api_lfm_schedule_fri">Loading...</div>
  </div>

  <div id="Saturday" class="tabcontent">
    <div id="api_lfm_schedule_sat">Loading...</div>
  </div>
  <div id="Sunday" class="tabcontent">
    <div id="api_lfm_schedule_sun">Loading...</div>
  </div>
</body>

</html>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Page link：https//www.codepudding.com/os/207288.html

Prev:Dynamically assigning object properties based on the value of an array of other objects
Next:Replace function doesn't replace the word
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding