What steps can I take to repair a JavaScript real-time clock that is not visible on the webpage?

I attempted to create a clock by following various online tutorials, but I'm encountering an issue. The goal is to have the clock update itself every second and display the current time. Could you please assist me with this? Here is what I would like to achieve: https://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock. Below is the code snippet that I have been working on:

function startClock() {
  var currentTime = new Date();
  console.log(currentTime);

  var currentHours = currentTime.getHours();
  console.log(currentHours);

  var currentMinutes = currentTime.getMinutes();
  console.log(currentMinutes);

  var currentSeconds = currentTime.getSeconds();
  console.log(currentSeconds);

  currentMinutes = checkTime(m);

  currentSeconds = checkTime(s);

  var time = currentHours + ":" + currentMinutes + ":" + currentSeconds;

  document.getElementById("time").innerHTML = time;

  var repeatTime = setTimeout(startClock, 1000);
}

function checkTime(i) {
  if (i < 10) {
    i = "0" + i;
    return i;
  }
}

Answer №1

Your code has encountered four issues that need to be addressed:

  1. The startClock() function is utilizing setTimeout() for recurring calls, yet it is not being called initially. To rectify this, include the line startClock(); near the closing </script> tag.

  2. The variable m is undefined in your code. Resolve this by replacing it with

    currentMinutes = checkTime(currentMinutes);
    .

  3. Similarly, the variable s is also undefined. You can correct this by using

    currentSeconds = checkTime(currentSeconds);
    .

  4. The checkTime() function does not return any value (undefined) if i is not less than 10. To fix this, add the statement else return "" + i;.

Address these issues to ensure proper functionality. Confirmation of the corrections has been tested successfully.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mastering ReactJs: The Ultimate Guide to Updating State Properties

I've been attempting to change the isSelected property for a specific row in my state data, but am finding that it's not updating. Can someone please offer guidance on the most effective approach to achieve this? var selecte ...

Display additional information from a JSON file after choosing an ID with AngularJS Select

After saving a JSON file filled with information, I managed to successfully populate a select menu with the names of each element from the JSON data using this code snippet: <select ng-model="car.marca" ng-options="item.brakeId as item.name for item in ...

triggering the onsen's setMainPage function when clicked using a variable from ng-repeat loop

I need help customizing my Onsen UI splitView app to dynamically set the main page based on a variable received from a clicked item in a list generated by ng-repeat. After researching ng-repeat and ng-click, I am still unable to achieve the desired outcom ...

Having trouble making updates to a MongoDB document through Node.js

I am working on the development of an online course platform and facing an issue while adding new video lectures to a specific course. After creating a course, any attempt to add new content triggers an update request, even when adding video lectures that ...

In React production, the use of .map as a function is unavailable

While my express react app build runs smoothly locally with the map function, the transition to production triggers an error stating that 'map' is not a function. The error specifically points to the line declaring 'let returnlist'. Be ...

JavaScript code to determine if a Rating is enabled for a SharePoint Online list

Currently, I am working on a JavaScript code that will allow users to provide star ratings for specific articles through a widget. One of the requirements is to first verify if the Rating feature is enabled for a particular SharePoint list. If it is enable ...

When I attempt to click on the Cancel button, the database row remains undeleted

After a user clicks on the "Cancel" button, I want to reset the source and remove the iframe to prevent the file from being uploaded to the server. This function is currently working as intended. However, I am facing an issue where even after clicking on ...

Displaying Various Items Based on the Language Selected in the Google Translate Widget

Currently, I am in the process of developing a website complete with a shopping cart that will feature different products based on the country of the customer. The client has requested the use of Google Translate to allow for language changes. To accommod ...

When retrieving data from a PHP $_SESSION using an Ajax $_POST call, outdated information is being returned

I am encountering an issue that I cannot seem to figure out. Currently, my application consists of three pages: Home.php Nearmiss.php Reports.php Each of these pages includes code at the top with a specific "thispage" variable unique to that page. < ...

Ways to conceal a div in React when the input or child is not in focus

My custom search and select component includes an input field and a results list enclosed in a wrapper container: <div className='wrapper'> <input /> <div className='results'> <div>Result Item</div> ...

Trigger refetchQueries post-execution of a mutation operation

In the past, I executed a mutation in a similar manner as shown below: export const useEditLocationName = () => { const [editFavoriteLocationName] = useEditFavoriteLocationNameMutation({ refetchQueries: [{ query: GetMyFavouritePlacesDocument}], ...

Creating obstacles in a canvas can add an extra layer of challenges and

I am working on creating a basic platformer game using the code displayed below. window.onload = function(){ var canvas = document.getElementById('game'); var ctx = canvas.getContext("2d"); var rightKeyPress = false; var leftKeyPress = false; ...

When a string begins with the "<" character, jQuery regex is unable to find a match

I am attempting to check if a string starts with the "<" character, but I am running into issues. The expression works perfectly fine on regex101.com, however, it fails when used in my personal files. When I input a backslash everything works as expect ...

Using a JavaScript class rather than an ID for toggling visibility

As a complete newbie to JavaScript, I've come across similar questions but I'm lost when it comes to coding - help needed! So here's the code I have so far, and I'm hoping someone can assist me. Currently, I have JavaScript set up to s ...

ajax causing issues with comments display on rails platform

Having trouble rendering comments using ajax in my rails app. The comments are only displayed after redirecting the page, even though they are successfully created. The issue seems to be with rendering comments using ajax and jquery! In my application.htm ...

The D3js visualization is failing to display properly for the user, with the D3 source code residing on the server

I have encountered an issue after transferring my D3js chart generation system from a development server with no problems to a live Windows 2008 r2 server. On the live server, only the background SVG element is displayed and none of the other elements like ...

Navigating efficiently with AngularJS directives

Hello, I am currently searching for a solution to dynamically modify the navigation links within the navigation bar based on whether a user is logged in or not. Of course, a logged-in user should have access to more pages. I have developed a UserService t ...

How to detect a right-click on empty time slots in Fullcalendar agenda views

I am working with a calendar feature on my web application using Adam Shaw's fullcalendar 2.1.1 JS library. I have successfully set up right-click responses for events and days by binding the "mousedown" event in the dayRender and eventRender callback ...

Display the keys of a nested array in Vue.js when the structure is unknown

Here is a representation of a dynamic array I have: nodes: [ { n1: "Foods", }, { n4: "Drinks", b7: [ { a2: "Beers", a4: [ ...

The issue of losing focus while using a Bootstrap 4 modal over another modal

Issue with Bootstrap 4: When opening the first modal, the focus becomes trapped inside it, preventing users from focusing on elements outside of the modal. The same issue occurs when opening the second modal – the focus remains trapped within it as inten ...