How do I getElementsByClassName instead of getElementById here?

Question

I am trying to replace the following's code of simple countdown timer getElementById('countdown') with getElementsByClassName('timer') instead but the code gets broken. Any idea?

var seconds = 60;
function secondPassed() {
  var minutes = Math.round((seconds - 30)/60);
  var remainingSeconds = seconds % 60;
  if (remainingSeconds < 10) {
    remainingSeconds = "0" + remainingSeconds; 
  }
  document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
  if (seconds == 0) {
    clearInterval(countdownTimer);
    document.getElementById('countdown').innerHTML = "Buzz Buzz";
  } else {
    seconds--;
  }
}

var countdownTimer = setInterval('secondPassed()', 1000);

<span id="countdown" class="timer"></span>

Here is a demo for you: http://jsfiddle.net/kg6q01ny/ – dfsq Sep 21 '14 at 10:44 — dfsq, Sep 21 '14 at 10:44

score 1 · Accepted Answer · answered Sep 21 '14 at 10:47

1

In this case, you can use document.getElementsByClassName("timer")[0] instead of getElementById('countdown').

answered Sep 21 '14 at 10:47

bigonez

111
2

document.getElementsByClassName() will always return an array, rather than an element directly. – bigonez Sep 21 '14 at 10:48
Do you mean it is not recommended to be used? sorry I am beginner to JS.. – mediaroot Sep 21 '14 at 10:57
You can use any format that you want if it can achieve the target. :) – bigonez Sep 21 '14 at 11:18

How do I getElementsByClassName instead of getElementById here?

1 Answers1