Change html without getElementById

Hello All,
I am very new to JavaScript and being playing around with it recently.I copied a countdown template but i’m trying re-modify it to fit my case. The script uses document.getElementById() to output but i am think of using <script> function(date_arg)</script> to output in the body tag. Is this possible?

find below the copy of what i have done.

<html>
<head>
<script>
// Set the date we're counting down to

 function retdate(cDownDate){
// "Dec 5, 2019 15:37:25"
var countDownDate = new Date(cDownDate).getTime();

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

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  
// var retval =   days + "d " + hours + "h " + minutes + "" + seconds + "s"
  + minutes + " " + seconds + "s ";

 return retval;
  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
   
  return "EXPIRED"

  }
}, 1000);
}
</script>
</head>
<title>Test Countdown </title>

<body>
 This is the date <script>  function retdate(cDownDate) </script>
</body>
</html>

Hello Haggy,
I think your code didn’t get posted as expected …

1 Like

Hi, I’ve changed your thread title to describe your problem more clearly. Descriptive titles, such as “Why does my function return undefined?”, are more likely to elicit helpful responses than generic titles, such as “Help please”.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

Thank you for this. it well appreciated.

Pardon me for this. I’m a newbie here.

I am afraid there is no date being shown:
https://jsfiddle.net/michaelsndr/wgevjxot/

This part, that you put into the body: function retdate(cDownDate) is what you would write when you define a function. It’s also the same as at the beginning of the script, where the function is actually defined.

The getElementById() would put you on the right track for a solution. That way you usually select an html element and change it. In your case, add the calculated date to the html. But in your html code there is no element with an ID that could be selected/added to. So you would need to create that first.

Maybe these fcc exercises could lead you further:

Apart from what michaelsndr already correctly said, there is another thing that you should consider.
The scripts should be the last thing you put in the body (basically just before the closing tag of the body).
This is because they are the last thing that should be loaded.
Sometimes this could take quite a bit of time and if you put them at the beginning, the rest of the page won’t load untill the scripts have loaded. And you want the user to see the content as soon as possible.
Another important thing: before doing any changes to the DOM (the Object that reflects the content of the page) via JavaScript you need to be sure that the content has loaded. You could do this with the jQuery $( document ).ready() function or with the vanilla JS document.onload function.

Thank you very much for the update. Actually i know that i can always output via some tag element but it will not be the best for what i want to achieve.

This is my case:
I am creating a table with many rows and there is a particular column of the table that will contain expiry dates for each row entry. I think it will be tedious to div-tag all the fields in this column and use getElementById() for-each field. That is the reason i’m suggesting of calling the function from an external file from each cell with if it will work. the function is referenced from a single source and called multiple times on the form.
NB: The function parameter on each call differs. Thus i can obtain countdown for different dates on the table.

Thanks.

Out of curiosity I googled it and it seems like you can access table data like an array … but I learned this only now and can’t tell you any more …

You can also find video tutorials and so on:
https://www.google.com/search?client=firefox-b-d&q=how+to+select+an+html+table+cell+in+javascript

Thank you very much for this. i think this gives me an idea on how to go about it. I will holla back when i’m able to crack it.

Hi Guys,
I am back again. but this time around i am trying to output via array of elements i have created. Each element is expected to output diff values with respect to the diff date input in the code. Kindly help look into the and assist with a better way to achieve this. Thanks in advance

<html>
<head>
<title>Date CountdownArrays
</title>
</head>
<body>
<!-- Display the countdown timer in an array of element -->


<!-- creating array of the p element -->
<p id="demo0"></p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<p id="demo5"></p>

<script>
//  creating variable to loop through the <p> elements ->
var demo = [];

// Set the date we're counting down to
var countDownDate = []        // new Date("Dec 5, 2019 15:37:25").getTime();
countDownDate[0] = new Date("Dec 5, 2019 15:37:25").getTime();
countDownDate[1] = new Date("Sep 2, 2019 15:37:25").getTime();
countDownDate[2] = new Date("May 12, 2019 15:37:25").getTime();
countDownDate[3] = new Date("Feb 18, 2019 15:37:25").getTime();
countDownDate[4] = new Date("Jan 4, 2019 15:37:25").getTime();
countDownDate[5] = new Date("Oct 5, 2019 15:37:25").getTime();

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

  // Get todays date and time
 
   var now= new Date().getTime();
 

  // Find the distance between now an the count down date
 var distance = []
var distance[0] = countDownDate[0] - now;
var distance[1] = countDownDate[1] - now;
var distance[2] = countDownDate[2] - now;
var distance[3] = countDownDate[3] - now;
var distance[4] = countDownDate[4] - now;
var distance[5] = countDownDate[5] - now;

  // Time calculations for days, hours, minutes and seconds
 var days = [];
 var days[0] = Math.floor(distance[0] / (1000 * 60 * 60 * 24));
 var days[1] = Math.floor(distance[1] / (1000 * 60 * 60 * 24));
 var days[2] = Math.floor(distance[2] / (1000 * 60 * 60 * 24));
 var days[3] = Math.floor(distance[3] / (1000 * 60 * 60 * 24));
 var days[4] = Math.floor(distance[4] / (1000 * 60 * 60 * 24));
 var days[5] = Math.floor(distance[5] / (1000 * 60 * 60 * 24));



 var hours = [];
var hours[0] = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var hours[1] = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var hours[2] = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var hours[3] = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var hours[4] = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var hours[5] = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));




  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  for (i=0,i < demo.length, i++)

  // Display the result in the element with id="demo"

  document.getElementById("demo")[i].innerHTML = days[i] + "d " + hours[i] + "h " + <br>;



  if (distance[i] < 0) {
    clearInterval(x);
    document.getElementById("demo0")[i].innerHTML = "EXPIRED"

  }
}, 1000);
</script>
</body>