How can I use an element id on multiple places

Question

I have a little problem that has been hard to solve, harder than I believed. I assume there will be a simple answer to this one.

So, I have made a timer using javascript, the timer works fine and that's not a problem. However, I am using this to define the timer:

document.getElementById("timerz").innerHTML = 0;

And then using this to display the timer

<span id=timerz></span>

I know that I can't use an element with the same ID on multiple places. However, I've tried this:

document.getElementsByClass("timerz").innerHTML = 0;

And then

<span class=timerz></span>

And it is still not working, how can I solve this? It's very strange.

Should be `document.getElementsByClassName` with an `s`. It will return you an array. — Zenoo, Mar 20 '18 at 15:49
Put quotes around the attributes in your html: `class="..."` and `id="..."`. — nurdyguy, Mar 20 '18 at 15:51
That won't have an effect, but I just tried for sure. And it didn't work either — Jax Flaxx, Mar 20 '18 at 15:53
Don't forget it gives you an array, not an element, so you'll have to access its elements like `document.getElementsByClassName( ... )[0] ` or so. — Zenoo, Mar 20 '18 at 15:54
This is simple js code and if its not working this only means that you have made a mistake somewhere else in your code — messerbill, Mar 20 '18 at 15:55
@zenoo it's a `NodeCollection`, which is array-like, but it's not an actual `Array`. — connexo, Mar 20 '18 at 16:17

Jamal Hassouni · Answer 1 · 2018-03-20T15:56:05.360

0

use getElementsByClass with s

 document.getElementsByClassName("timerz")[0].innerHTML = 0;

or

var timerz = document.getElementsByClassName("timerz");
var i;
for (i = 0; i < timerz.length; i++) {
    timerz[i].innerHTML = 0;
}

edited Mar 20 '18 at 15:56

answered Mar 20 '18 at 15:53

Jamal Hassouni

81
2
9

It doesn't work. Already tried – Jax Flaxx Mar 20 '18 at 15:54
this is simply wrong - https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName – messerbill Mar 20 '18 at 15:54
you can use `var timerz = document.getElementsByClassName("timerz"); var i; for (i = 0; i < timerz.length; i++) { timerz[i].innerHTML = 0; }` – Jamal Hassouni Mar 20 '18 at 16:05

score 0 · Accepted Answer · answered Mar 20 '18 at 15:59

0

So here you need to understand how javascript works.

document.getElementsByClassName("timerz")

This will return an array of spans as we have used a same class for each span. Now we need to iterate each element and than put html inside it.

I recommed you to go through any javascript tutorial

var spans = document.getElementsByClassName("timerz")
for(span of spans){
 span.innerHTML = "0"
}

<span class="timerz"> </span>
<span class="timerz"> </span>
<span class="timerz"> </span>
<span class="timerz"> </span>

answered Mar 20 '18 at 15:59

Satyam Pathak

6,612
3
25
52

Is `for...of` on `NodeCollection` widely supported as of now? – connexo Mar 20 '18 at 16:24
Old systems having internet explorer is not having compatibility as per mdn web docs else it is widely supported . – Satyam Pathak Mar 20 '18 at 16:35

connexo · Answer 3 · 2018-03-20T16:22:18.310

This is how you iterate over a NodeCollection (which returns whenever you use any query method that potentially can return more than one element like document.querySelectorAll, document.getElementsByClassName, document.getElementsByTagName):

var timerz = document.getElementsByClassName("timerz");

Array.prototype.forEach.call(timerz, function(timer, index) {
    timer.textContent = `This is the timer with the index ${index}.`
})

<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>

You have to use Array.prototype.forEach.call here because the data type returned by document.getElementsByClassName, despite being very similar to an Array, is not an actual Array. In some browsers NodeCollection may not have a method forEach().

Another option is to create an actual Array from the NodeCollection:

var timerz = Array.from(document.getElementsByClassName("timerz"));

timerz.forEach(function(timer, index) {
    timer.textContent = `This is the timer with the index ${index}.`
})

<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>
<div class="timerz"></div>

How can I use an element id on multiple places

3 Answers3