javascript get multiple id at once at set a function

Question

I have these divs (notes) where i need each one to have a different ID each and i have managed to figure out how to give them their own unique ID, but now i dont know how to get them. I can do by using the manually function where i write the ID myself but thats not a good way. So what im struggling with is getting the id 'rect' which i increment with 1 eahc time i create a new one. So rect0, rect1, rect2 and so on. But how do i get them without using: this function 100times?

function update(jscolor) {
    document.getElementById('rect0').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect1').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect2').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect3').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect4').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect5').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect6').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect7').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect8').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect9').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect10').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect11').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect12').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect13').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect14').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect15').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect16').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect17').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect18').style.backgroundColor = "#" + jscolor;
    document.getElementById('rect19').style.backgroundColor = "#" + jscolor;
}

I've tried where i get the rect and then increment like using ++, but it didnt work, so i hope anyone know a efficient way.

`i need each one to have a different ID` that is unlikely. Use classes or layout structure to figure out the right group to target with CSS. — James, May 10 '17 at 15:07
definitely agree with @JethroHazelhurst, it's the difference between shouting "hey everyone, let's get pizza!" and "Hey Jane, let's get pizza! Hey Joe, let's get pizza! Hey Albert, let's get pizza! ..." — Hodrobond, May 10 '17 at 15:08
@Hodrobond I've tried with classes, but i doesn't want to change the color! Check my codepen here: https://codepen.io/Qbinx/pen/OmObRg?editors=1010 — , May 10 '17 at 16:22
You want to change the background color of all the "sticker"s, right? [updated codepen](https://codepen.io/anon/pen/MmQzPM?editors=1010) — Hodrobond, May 10 '17 at 16:34
@Hodrobond Thank man, but what if i want to be able to change each notes color different? Right now i can only pick the color from the first note? and the other dont even run the function? — , May 10 '17 at 16:45
@UsamaAhmed I'd recommend asking a second question about allowing each sticker to control it's own background, you're more likely to get help =) — Hodrobond, May 10 '17 at 16:59
@Hodrobond But do you know if the class or id has anything to do with it? — , May 10 '17 at 17:17
@UsamaAhmed Personally, I would have the click handler assigned to the classes, and have the click handler use `this` — Hodrobond, May 10 '17 at 17:18
Okay, thank again, i will figure it out and get it working for sure. — , May 10 '17 at 17:34

nem035 · Accepted Answer · 2017-05-10T15:07:48.870

1

Ideal tool for this job is a loop:

let numberOfRects = 20;
for (let i = 0; i < numberOfRects; i++) {
  document.getElementById('rect' + i).style.backgroundColor = "#" + jscolor;
}

edited May 10 '17 at 15:07

answered May 10 '17 at 15:05

nem035

34,790
6
87
99

brk · Answer 2 · 2017-05-10T15:14:10.853

You can do like this & can change the value limit of i. Just for demo I have kept it 19 but it can be vary

function update(jscolor) {
  for (var i = 0; i <= 19; i++) {
    document.getElementById('rect' + i).style.backgroundColor = "#" + jscolor;
  }
}

Alternatively you can do like this using className

var testElements = document.getElementsByClassName('example')
Array.prototype.filter.call(testElements, function(testElement) {
  testElement.style.backgroundColor = 'red';;
});

<div class="example">First div element with class="example".</div>

<div class="example">Second div element with class="example".</div>

score 1 · Answer 3 · answered May 10 '17 at 15:07

1

var x = document.querySelectorAll("[id^='rect']");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "#" + jscolor;
}

answered May 10 '17 at 15:07

Anirudha Gupta

9,073
9
54
79

When i try to add the code the element disappears? Do you know what can cause that? Check my codepen: https://codepen.io/Qbinx/pen/OmObRg – May 10 '17 at 16:12
the given pen doesn't contain any ID rect, am I missing something – Anirudha Gupta May 10 '17 at 16:15
In the createNote function it does, but i didnt update the whole code so check this link: https://codepen.io/Qbinx/pen/OmObRg?editors=1010 – May 10 '17 at 16:23

javascript get multiple id at once at set a function

3 Answers3

Linked