Is it possible to modify text periodically throughout the day using JavaScript?

Question

Is it possible to modify text periodically throughout the day using JavaScript?

I'm new to JavaScript and looking for a way to create a schedule on my website. The schedule changes every half hour with different speakers, and I want to display the speaker's name based on the time slot.

Currently, I have a working solution but it involves hard-coding 48 if statements for each top and bottom of the hour - not the most efficient approach. Here is the code:

<html>
<body>
<h1>Test JavaScript</h1;
<p id="demo"></p>
<script>
setInterval(getSchedule, 1000);
function getSchedule(){
var today = new Date()
var curHr = today.getHours()
var curMin = today.getMinutes()
if (curHr == 1 && curMin < 30) {
document.getElementById("demo").innerHTML = "John";
} 
else if (curHr == 1 && curMi...

I'd like to find a way to simplify this code. Possibly using an array containing all speaker names, but I'm unsure how to iterate through it at specific times. Any suggestions would be appreciated. Thanks!

javascript

Answer 1

Answer №1

Instead of using multiple if statements, you can simplify the code with:

  var timeDisplay = currentHour + (currentMinute < 30 ? ":00" : ":30");
   document.getElementById("time").innerHTML = timeDisplay;

Now, update your function to look like this:

function showTime(){
      var now = new Date();
      var currentHour = now.getHours();
      var currentMinute = now.getMinutes();
      var timeDisplay = currentHour + (currentMinute < 30 ? ":00" : ":30");
   document.getElementById("time").innerHTML = timeDisplay;
}

Answer 2

Instead of using multiple if statements, you can simplify the code with:

  var timeDisplay = currentHour + (currentMinute < 30 ? ":00" : ":30");
   document.getElementById("time").innerHTML = timeDisplay;

Now, update your function to look like this:

function showTime(){
      var now = new Date();
      var currentHour = now.getHours();
      var currentMinute = now.getMinutes();
      var timeDisplay = currentHour + (currentMinute < 30 ? ":00" : ":30");
   document.getElementById("time").innerHTML = timeDisplay;
}

Answer 3

Answer №2

Do you understand what needs to be accomplished?

<html>
<body>

<h1>Testing Java Script</h1>

<p id="output"></p>

<script>
setInterval(getSchedule, 1000);

var speakers = { "10:00": "kenvin", "10:30": "faker" };

function getSchedule(){
var currentDate = new Date()
var currentHour = currentDate.getHours()
var currentMinute = currentDate.getMinutes()

console.log([currentHour, (currentMinute >= 30) ? "30" : "00"].join(":"));
var keyValue = [currentHour, (currentMinute >= 30) ? "30" : "00"].join(":");

document.getElementById("output").innerHTML = keyValue + " - " + speakers[keyValue];
}
</script>
</body>
</html>

Answer 4

Do you understand what needs to be accomplished?

<html>
<body>

<h1>Testing Java Script</h1>

<p id="output"></p>

<script>
setInterval(getSchedule, 1000);

var speakers = { "10:00": "kenvin", "10:30": "faker" };

function getSchedule(){
var currentDate = new Date()
var currentHour = currentDate.getHours()
var currentMinute = currentDate.getMinutes()

console.log([currentHour, (currentMinute >= 30) ? "30" : "00"].join(":"));
var keyValue = [currentHour, (currentMinute >= 30) ? "30" : "00"].join(":");

document.getElementById("output").innerHTML = keyValue + " - " + speakers[keyValue];
}
</script>
</body>
</html>

Answer 5

Answer №3

All you need is a single IF statement...

if (currentMinutes < 30) { displayTime.innerHTML = currentHour+':00';} else { displayTime.innerHTML = currentHour+':30';}

Answer 6

All you need is a single IF statement...

if (currentMinutes < 30) { displayTime.innerHTML = currentHour+':00';} else { displayTime.innerHTML = currentHour+':30';}

Is it possible to modify text periodically throughout the day using JavaScript?

Answer №1

Answer №2

Answer №3

Similar questions

Retrieve a form (for verification purposes) from a separate AngularJS component

The AJAX load event listener triggers prior to receiving a response from the server

Receiving data through multiple ajax calls nested within another ajax call

Limitations of jQuery: onClick function not transferable

Reset the event to its default action in jQuery following the use of event.preventDefault()

There seems to be a glitch preventing Highchart from functioning within a jQuery function

How to display an unordered list horizontally in HTML

"How can you enhance the performance of JavaScript and CSS in a Chrome Extension without using exclude_matches/globs or excluding domains

Ensuring the accuracy of forms using third-party verification services

Issue with conditional image source URL in NUXT component not functioning as expected

Can an uploaded video file have frames and audio stripped using JS since iPhone doesn't allow inline video playback?

Obtain the appropriate selection in the dropdown based on the model in Angular

Verify authentication on a SignalR console application using a JavaScript client

Leveraging AJAX Post Data in NodeJS using Express

Troubleshooting Tips for Fixing the "ER_HOST_IS_BLOCKED: Host 'abc' has been blocked due to numerous connection errors" Issue

CSS - Help! Seeing different results on Internet Explorer

Activate only the content of the parent div in a duplicated list using Javascript

npm build issues stemming from browserlist configurations

Restricting the Vue for-loop results to display only the current item in use

invoke a function through a form in Angular