Javascript document.getElementsByClassName is not worikng in my script

Question

I am working on a project which uses this script. This script takes present time and subtract it from given time.. like I gave 9 10,2017.It gives output like 29d 23h 3m 2s as remaining time

 <!DOCTYPE html>
<html>
<head>
    <title>Script</title>
</head>
<body>
<script type='text/javascript'>
// Set the date we're counting down to
var countDownDate = new Date('9 10,2017 00:00:00').getTime(); //m d, y h m s

// 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);

    // Output the result in an element with id='time'
                  document.getElementById('rtime').innerHTML = days + 'd ' + hours + 'h '
    + minutes + 'm' + seconds + 's';
    // If the count down is over, write some text 
    if (distance <= 0) {
      clearInterval(x);
                   document.getElementById('rtime').innerHTML = 'EXPIRED'; // SUBMIT FORM;
  }
}, 1000); </script>
<h4 id='rtime'></h4>
<h4 id='rtime'></h4>
<h4 id='rtime'></h4>
</body>
</html>

I wanted it to give the output in all tags where I used its id. But it only gives output in the first id element. I googled the problem and found

There should be class instead of id to use it again also class should be in array

I modified the script into like this

<!DOCTYPE html>
<html>
<head>
    <title>Script</title>
</head>
<body>
<script type='text/javascript'>
// Set the date we're counting down to
var countDownDate = new Date('9 10,2017 00:00:00').getTime(); //m d, y h m s

// 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);

    // Output the result in an element with id='time'
    for(var y=0;y<=3;y++){
                  document.getElementsByClassName('rtime').innerHTML[y] = days + 'd ' + hours + 'h '
    + minutes + 'm' + seconds + 's';
};
    // If the count down is over, write some text 
    if (distance <= 0) {
      clearInterval(x);
                   document.getElementsByClassName('rtime').innerHTML[0] = 'EXPIRED'; // SUBMIT FORM;
  }
}, 1000); </script>
<h4 class='rtime'></h4>
<h4 class='rtime'></h4>
<h4 class='rtime'></h4>
</body>
</html>

But its still not working.

`getElementsByClassName` returns a NodeList. Also what is `.innerHTML[y]`? — Rajesh, Aug 11 '17 at 12:45
The `[y]` needs to be after the function call, not after `.innerHTML` — Pointy, Aug 11 '17 at 12:45
querySelector and getElementsByClassName return node lists, you need to iterate over them. Check MDN, learn this, or learn jQuery.lol — ptts, Aug 11 '17 at 12:52

score 2 · Accepted Answer · answered Aug 11 '17 at 12:50

// Set the date we're counting down to
var countDownDate = new Date('9 10,2017 00:00:00').getTime(); //m d, y h m s

// 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);

  // Output the result in an element with id='time'
  for (var y = 0; y < 3; y++) {
    document.getElementsByClassName('rtime')[y].innerHTML = days + 'd ' + hours + 'h ' +
      minutes + 'm' + seconds + 's';
  };
  // If the count down is over, write some text 
  if (distance <= 0) {
    clearInterval(x);
    document.getElementsByClassName('rtime')[0].innerHTML = 'EXPIRED'; // SUBMIT FORM;
  }
}, 1000);

<h4 class='rtime'></h4>
<h4 class='rtime'></h4>
<h4 class='rtime'></h4>

getElementsByClassName returns array of elements with given class name.

In your case do like this getElementsByClassName('rtime')[y].innerHTML and this getElementsByClassName('rtime')[0].innerHTML

`gEBCN` definitely doesn't return an array, please read the [docs](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName). — Teemu, Aug 11 '17 at 13:16

Javascript document.getElementsByClassName is not worikng in my script

1 Answers1