Why won't my JavaScript run in HTML Visual Code

Question

My JavaScript won't run for my landing page clock. I have tried to put the JavaScript in the head and in the body but it still will not make my clock tick. What is wrong with my code? How do I fix this?

const time = document.getElementById('time'),
  greeting = document.getElementById('greeting'),
  name = document.getElementById('name'),
  focus = document.getElementById('focus');

function showTime() {
  let today = new Date(),
    hour = today.getHours(),
    min = today.getMinutes(),
    sec = today.getSeconds();
  //Set Am or PM
  const amPM = hour >= 12 ? 'PM' : 'AM';

  //12hr Format 
  hour = hour % 12 || 12;

  //Output Time
  time.innerHTML = '${hour}<span>:</span>${min}<span>:</span>${sec}';

  setTimeout(showTime, 1000);
}
Run
showTime();

<!DOCTYPE html>
<html lang="en" <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial- 
     scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2? 
     family=Quicksand&display=swap" rel="stylesheet" <title>Welcome Page</title>
</head>

<body>
  <time id="time">12:34:56 PM</time>
  <h1>
    <span id="greeting">Good Afternoon</span>
    <span id="name" contenteditable="true">Heather</span>
  </h1>

  <h2>What Is Your Focus For Today?</h2>
  <h2 id="focus" contenteditable="true">FIX THIS ISH ! </h2>
  <script src="js/main.js"></script>
</body>

</html>

Have you looked in your browser's console to see if there are any errors? — AKX
– AKX, Commented Jun 16, 2021 at 12:19
Please share more details. What exactly is not working? What have you tried to make it work? — Nico Haase
– Nico Haase, Commented Jun 16, 2021 at 12:24
Your javascript doesn't look valid, what is Run? You probably have an error in the dev tools console. — phuzi
– phuzi, Commented Jun 16, 2021 at 12:25
Your HTML is also not valid, missing the ends of tags (>). — Heretic Monkey
– Heretic Monkey, Commented Jun 16, 2021 at 12:28
Also your html looks malformed: <html lang="en" <head> missing closing > for opening html tag. No closing > on the last link tag before title — phuzi
– phuzi, Commented Jun 16, 2021 at 12:29

ikhvjs · Accepted Answer · 2021-06-16 12:39:56Z

First, you should use setInterval instead of setTimeout.

Second, you should use ` instead of ' to output the time.

const time = document.getElementById('time'),
  greeting = document.getElementById('greeting'),
  name = document.getElementById('name'),
  focus = document.getElementById('focus');

function showTime() {
  let today = new Date(),
    hour = today.getHours(),
    min = today.getMinutes(),
    sec = today.getSeconds();
  //Set Am or PM
  const amPM = hour >= 12 ? 'PM' : 'AM';

  //12hr Format 
  hour = hour % 12 || 12;

  //Output Time
  time.innerHTML = `${hour}<span>:</span>${min}<span>:</span>${sec}${amPM}`;
}

setInterval(showTime,1000);

<!DOCTYPE html>
<html lang="en"> 
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial- 
     scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2? 
     family=Quicksand&display=swap" rel="stylesheet" >
     <title>Welcome Page</title>
</head>

<body>
  <time id="time">12:34:56 PM</time>
  <h1>
    <span id="greeting">Good Afternoon</span>
    <span id="name" contenteditable="true">Heather</span>
  </h1>

  <h2>What Is Your Focus For Today?</h2>
  <h2 id="focus" contenteditable="true">FIX THIS ISH ! </h2>
  <script src="js/main.js"></script>
</body>

</html>

Mahbubur Rahman · Accepted Answer · 2021-06-16 12:32:13Z

0

problems:-

instead of backtik(``) you have used single quote('')

Run (previous line of calling showTime)

try this code.....

const time = document.getElementById('time'),
  greeting = document.getElementById('greeting'),
  name = document.getElementById('name'),
  focus = document.getElementById('focus');

function showTime() {
  let today = new Date(),
    hour = today.getHours(),
    min = today.getMinutes(),
    sec = today.getSeconds();
  //Set Am or PM
  const amPM = hour >= 12 ? 'PM' : 'AM';

  //12hr Format 
  hour = hour % 12 || 12;

  //Output Time
  time.innerHTML = `${hour}<span>:</span>${min}<span>:</span>${sec}`;

  setTimeout(showTime, 1000);
}
showTime();

answered Jun 16, 2021 at 12:32

Mahbubur Rahman

1606 bronze badges

5 Comments

Mahbubur Rahman Over a year ago

sorry for not removing 'Run'. hope it will work now

ikhvjs Over a year ago

You can add the code in SO code snippet meta.stackoverflow.com/a/356679/14032355

Heather Harper Over a year ago

YES! Thank you SO MUCH ! Two days on the wrong tics !!!

Mahbubur Rahman Over a year ago

Did you enclose the template literal by Backtik?

Mahbubur Rahman Over a year ago

And hope you didn't forget to call setTimeout(showTime, 1000) inside the showTime function. Or you can use setInterval (showTime,100) instead of setTimeout call outside.

Heather Harper · Accepted Answer · 2021-06-16 13:40:54Z

0

it was the backticks in my JS THANKS !

const time = document.getElementById('time'),
  greeting = document.getElementById('greeting'),
  name = document.getElementById('name'),
  focus = document.getElementById('focus');

function showTime() {
  let today = new Date(),
    hour = today.getHours(),
    min = today.getMinutes(),
    sec = today.getSeconds();
  //Set Am or PM
  const amPM = hour >= 12 ? 'PM' : 'AM';

  //12hr Format 
  hour = hour % 12 || 12;

  //Output Time
  time.innerHTML = '${hour}<span>:</span>${min}<span>:</span>${sec}';

  setTimeout(showTime, 1000);
}
Run
showTime();

<!DOCTYPE html>
<html lang="en" <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial- 
     scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2? 
     family=Quicksand&display=swap" rel="stylesheet" <title>Welcome Page</title>
</head>

<body>
  <time id="time">12:34:56 PM</time>
  <h1>
    <span id="greeting">Good Afternoon</span>
    <span id="name" contenteditable="true">Heather</span>
  </h1>

  <h2>What Is Your Focus For Today?</h2>
  <h2 id="focus" contenteditable="true">FIX THIS ISH ! </h2>
  <script src="js/main.js"></script>
</body>

</html>

answered Jun 16, 2021 at 13:40

Heather Harper

72 bronze badges

1 Comment

Nico Haase Over a year ago

Please share more details. The code you've shared intially does not contain any backticks, neither does the code from your answer

Collectives™ on Stack Overflow

Why won't my JavaScript run in HTML Visual Code

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related