Member Avatar for alexxx1

I am creating a basic page in w3spaces and while I've finished editing the html and css part, I'd like to add a few scripts in it. I tried to add this script (https://www.w3schools.com/howto/howto_js_countdown.asp), which is a countdown timer to my own page but it seems like it doesn't run. Initially I used the code provided <p id="demo"></p> and nothing happened. I also tried other things such as <span id="demo" class="demo"></span> and <script src="./countdown.js"></script> but neither worked. Do you have any suggestion please as I am not very experienced.

Edited by alexxx1
  • 3 Contributors
  • 11 Replies
  • 108 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by toneewa
Member Avatar for Dani

You need to include all of the code in order to put everything together to get a working timer. The code <span id="demo" class="demo"></span> is HTML which we're using as a placeholder for where the timer should be. Then, the javascript actually is what makes the timer function, with code that keeps updating the HTML within that <span> tag.

If you copy and paste all of the HTML and Javascript code in the working demo here, and put it into an HTML page, you can build your own timer.

Alternatively, you can break it up into two files, uploaded to the same directory on the www, as so:

timer.html:

<!DOCTYPE HTML>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    p {
      text-align: center;
      font-size: 60px;
      margin-top: 0px;
    }
    </style>

    // Note we add this here to reference where the JS file is
    <script src="./countdown.js">
</head>
<body>

<p id="demo"></p>

</body>
</html>

countdown.js:

*Everything within <script> and </script> tags in the demo, as so:

// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2030 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

    [...]

}, 1000);

I hope this makes some sense. Please reply if you have any follow up questions.

Member Avatar for alexxx1

The first option actually worked and thank you for that, but why doesn't it run with a link to the .js path? I wouldn't like to include all my codes to my main page

Edited by alexxx1
Member Avatar for Dani

It should run with a link to the .js file. You just need to then also upload the JS file :) How to do that was my second option.

Member Avatar for alexxx1

Untitled.png

Could you kindly check?

Member Avatar for Dani

You can see that the countdown.js file has the little squiggle red underline on lines 27, 28, and 29, indicating that there's some type of syntax error there.

The problem is that you have a typo on line 26. It should not be distance < /> 0.

You also have a red squiggle on line 10 because the close bracket you have on line 7 shouldn't be there.

I'm not sure if you have any other typos.

Member Avatar for Dani

Please show me your code. You must be doing something wrong still.

Member Avatar for alexxx1

a.png

b.png

This post has no text-based content.
Member Avatar for Dani

I'm sorry. I wasn't near my computer over the weekend.

It's really impossible to debug what's wrong with your code when all I'm seeing is a screenshot of a portion of it. For example, it might be CORS that is causing it to not work, but there's no way of investigating that without actually checking the HTTP headers of the actual URL.

Please provide a public link to the actual webpage you'd like help with. Alternatively, please set up a dummy test page and provide a link to that.

Member Avatar for Dani

... In other words, we already see it works at the live demo at https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_countdown

There has to be something on your website that is causing the javascript to break, but without actually seeing your website, there's no way to diagnose the issue.

It's like saying that your lights don't turn on, and asking an electrician to figure out why, but only sending them a photograph of the lightbulb. Yes, from the photograph, they might be able to tell you that the bulb is blown. However, if that wasn't it, it might not be working because there's a problem with the light switch. It might not be working because of a problem with the circuit breaker. It might not be working because of a problem with the electrical company.

I already saw a screenshot of your code and saw some glaring typos that were causing syntax errors. Now that your updated code doesn't show any "quick fixes", I need to actually look at the webpage to investigate why it's not working.

Member Avatar for toneewa

From what I can see, I'm thinking it's not embedded correctly.

Here, I created a test site using the sample timer.
I suggest you right-click and inspect the elements for the pages.

You'll see the page reference source to the html document, where the code is placed.

timer.jpg

timer2.jpg

Check it out. Hope that helps.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.