Forced CSS rule via Javascript is partially applied

Question

I've this following HTML:

<li id="telephone"><a href="tel:938409"target="_blank"><img  src="https://playground.air-srl.com/icombanner/telico.png"/></a></li>
                    <li id="ico"><a href="./cmbmodal.php?servizio=TEST" target="_blank"><img src="https://playground.air-srl.com/icombanner/cmbico.png"/></a></li>
                    <li id="status"></li>
                    <li  id="icon"><a href="https://m.me/xxxx/" target="_blank"><img src="https://playground.air-srl.com/icombanner/fbico.png"/></a></li>

                    <li id="icon">
                        <a href="https://api.whatsapp.com/send?phone=03480224&text=Buongiorno, sono interessato alla vostra offerta." target="_blank">
                            <img src="https://playground.air-srl.com/icombanner/whaico.png"/>
                        </a>
                    </li>

On a "onload" JS Function, I'm forcing the CSS in this way:

document.getElementById("telephone").style="display: block";
                        document.getElementById("icon").style="display: block";
                        document.getElementById("status").style="display: block";

The result is that I've three "icon" elements as you can see, but onlythe first has this forced stye rule applied.

Any suggestion about why isn't it completely applied?

Edit: the second "li" element on HTML code has still "icon" id instead of "ico". — Istorn
– Istorn, Commented Jul 13, 2017 at 9:55
id attribute intended to be unique. Browser doesn't expect you to have more than one element with id icon. Use class="icon" and document.querySelectorALl('.icon').forEach(element => element.style = "display: block;" — Andrey
– Andrey, Commented Jul 13, 2017 at 9:57
@LorenzoNeri: No, even after the edit, there are two id="icon" in the above (and one id="eco"). — T.J. Crowder
– T.J. Crowder, Commented Jul 13, 2017 at 9:58

taha · Accepted Answer · 2017-07-13 10:28:56Z

2

give your icons a class instead of id (ids must be unique in the DOM). class="icon" then

var icons = document.getElementsByClassName('icon');
Array.prototype.forEach.call(icons, function(icon){
  icon.style.display = "block";
});

document.getElementsByClassName() returns an array-like object of all child elements which have all of the given class names

edited Jul 13, 2017 at 10:28

answered Jul 13, 2017 at 10:02

taha

1,01710 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Necvetanov · Accepted Answer · 2017-07-13 09:59:11Z

1

You have 3 elements with the same ID. ID is unique attribute use class instead:

<li  class="icon" ...

And change the selector in the JS function to:

(".icon")

edited Jul 13, 2017 at 9:59

answered Jul 13, 2017 at 9:57

Necvetanov

4044 silver badges17 bronze badges

3 Comments

T.J. Crowder Over a year ago

There has to be a dupetarget for this.

Necvetanov Over a year ago

I consider myself a Stackoverflow noob. Am I not supposed to answer semi trivial questions but look for a duplicate thread instead ?

T.J. Crowder Over a year ago

Yes. The goal of SO is to build a database of useful programming information. Ideally, there'd be one question and set of answers which all duplicates would point to. The system falls short of that ideal, not least because it doesn't make finding duplicates very easy and doesn't reward doing so (two critical flaws in SO in my view), but that's the goal.

Collectives™ on Stack Overflow

Forced CSS rule via Javascript is partially applied

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related