Assigning the same attribute to multiple divs

Question

I'm designing an Instagram clone. I had a problem with the story feature. When the story opened, I made the lines above. These lines are made up of divs. They all have a common class. I made this for CSS design. But I made an active id that won't happen to all of them.

Those with active id will be white and their opacity will be 1. Those who do not have this id will have an opacity of 0.5

It works when you assign a single id. But when I assign the second id, only the first one works.

const active = document.getElementById("active");

active.style.backgroundColor = "white";
active.style.opacity = 1;

.flex-container {
  display: flex;
  flex-direction: row;
}

.flex-container-item {
  background-color: rgb(255, 255, 255);
  opacity: 0.5;
  padding: 1px;
  flex: 1pt;
  margin-right: 5px;
}

<div class="flex-container">
  <div class="flex-container-item" id="active">A</div>
  <div class="flex-container-item">B</div>
  <div class="flex-container-item">C</div>
  <div class="flex-container-item">D</div>
</div>

Ids are unique, use a class instead. Also, set your css in css, and toggle (or add/remove) your class. — Cédric, Oct 31 '22 at 10:54
Does this answer your question? [Can multiple different HTML elements have the same ID if they're different elements?](https://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme) — Cédric, Oct 31 '22 at 10:56

score 2 · Answer 1 · answered Oct 31 '22 at 11:00

2

You can not assign same ID value to multiple HTML elements. Use "active" class on the class attribute and then get it in javascript like that.

const activeElements = document.getElementsByClassName("active");

answered Oct 31 '22 at 11:00

Umar

94
4

Be aware that `.active` is offently used so be sure to be specific enough when you select it. You might need something like `document.querySelectorAll("div.flex-container div.flex-container-item.active")` – Cédric Oct 31 '22 at 11:30

score 1 · Accepted Answer · answered Oct 31 '22 at 11:07

1

You cant have multiple same ids because id should be unique, instead make active css class e.g.

.active {
   background-color: white;
   opacity: 1;
 }

and then conditionally apply this class to your divs that you want to activate

answered Oct 31 '22 at 11:07

ognjenj

78
1
6

1

Thanks. It has been very functional for me. How could I not think of such a simple solution – Lordke Oct 31 '22 at 11:15

Assigning the same attribute to multiple divs

2 Answers2